vue-cli构建项目并且引入BootStrap和JQuery的方法

2018-04-22 21:15 阅读 1,836 次 评论 0 条

vue-cli构建项目流程

1、首先要安装配置好Node.js环境

2、npm install -g vue-cli     全局安装vue-cli

vue init webpack projectName    生成项目名为projectName的的项目模板,projectName自定义

3、npm install         到projectName文件夹中打开git bash或者命令窗口初始化安装依赖

4、npm run dev    浏览器会自动弹出一个欢迎页面,如果不自动弹出就访问http://localhost:8080地址

vue-cli项目引用Jquery

输入 npm install jquery --save-dev      用npm下载Jquery依赖

找到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中加入

<span style="font-size:18px;">import $ from 'jquery'</span>
vue-cli项目引用BootStrap

1、修改webpack.base.conf.js文件:

alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'assets': path.resolve(__dirname, '../src/assets'),
'jquery': "jquery/src/jquery"
}

2、在入口文件main.js中加入:

import './assets/css/bootstrap.min.css'

import './assets/js/bootstrap.min'

3、在assets文件目录中拷贝bootstrap各种文件

版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:vue-cli构建项目并且引入BootStrap和JQuery的方法 | 猿笔记

发表评论


表情