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

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的方法 | 雨晨博客