您的位置:首页 > Web前端 > JQuery

vue-cli快速构建项目>>>>及引入jquery、jquery插件、this的指向 mounted钩子函数应用

2017-06-08 17:01 1186 查看
1>首先安装nodejs 版本5.0以上

node -v  (测试安装好了没有--安装好了就不用安装了)

**可以依赖淘宝镜像(如果需要就安装)

npm install cnpm -g --registry=https://registry.npm.taobao.org

********用cmd切入自己创建的文件黑窗口**********

2>cnpm inatall vue-cli -g  全局安装(一定加-g全局安装**电脑只需要安装一次)

************用cmd切入自己创建的文件夹黑窗口*************

3>vue init webpack
  //后面可以跟文件名字

4>Install vue-router?//个选yes  其余的都选n

5>cnpm install 

如果第一步没有写文件夹名字就直接执行

如果第一步写了文件夹名字,需要切入创建的文件执行这个命令

6>npm run dev
//运行项目

不出意外浏览器会自动弹出一个欢迎页面,如果不自动弹出就打开http://localhost:8080

************************这里已经是一个vue-cli项目了**********



************接下来引入jquery********

1>cnpm install jquery@2.1.4
--save-dev

//可以选择性的引用想要的版本

找到build文件夹下的webpack.base.conf.js文件打开,修改配置:

1、加入webpack对象:

var webpack=require('webpack');
 

  2、在module.exports里面加入:
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
],


3、在入口文件main.js中加入

	import $ from 'jquery'


************接下来引入jquery插件********

1.在assets放入想用的插件(也可以是文件夹)



2.这里开始调试



注意事项:this的指向



钩子函数应用

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: