vue-cli创建vue项目并引入JQuery和bootstrap

首先默认了有已经安装了node（去node.js官网下载，使用它自带的包管理器npm通过命令下载相关框架、库文件）

1.　　npm install -g vue-cli                   　　　　全局安装vue-cli（一般也都安装了）

2.　　vue init webpack-simple 项目名                 生成项目名模板（简单版的）/　　vue init webpack 项目名

3.　　cd 项目名

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

ps：此时文件夹目录应该（以下讲的都是webpack-simple的！）

5.　　npm run dev 浏览器会自动弹出一个欢迎页面

要点来了

6、引入jq和bootstrap

　　6.1

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

　　输入 npm install bootstrap --save-dev 

   　6.2

　　找到webpack.config.js文件打开，修改配置：

 　　（1）在alias中多加'jquery': "jquery/src/jquery"这句

　　　　resolve: {

　　　　　　alias: {

　　　　　　　　'vue$': 'vue/dist/vue.esm.js',

　　　　　　　　'jquery': "jquery/src/jquery"

　　　　　　},

　　　　　　extensions: ['*', '.js', '.vue', '.json']

　　　　},

　　（2）在module的rules多加

　　　　{

　　　　　　test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

　　　　　　loader: 'file-loader',

　　　　　　options: {

　　　　　　　　limit: 10000,

　　　　　　　　name: 'fonts/[name].[hash:7].[ext]'

　　　　　　　　　　}

　　　　}

　　（3）在module.exports.plugins = (module.exports.plugins || []).concat()中加

 

　　　　new webpack.ProvidePlugin({

　　　　$: "jquery",

　　　　jQuery: "jquery",

　　　　jquery: "jquery",

　　　　"window.jQuery": "jquery"

　　　　})

　　6.3

　　　　（1）去官网下载bootstrap的包 然后呢放在src/assert中

ps：这样

　　　　(2).  引入jquery和这个包

　　　　　　

　　　　　　import $ from 'jquery'　　　　　　（写成import jquery from 'jquery'也是可以的）ps和之前6.2（3）里面有关

　　　　　　import './assets/bootstrap-3.3.7-dist/css/bootstrap.css'

　　　　　　import './assets/bootstrap-3.3.7-dist/js/bootstrap.js'

　　　　（3).  检查一下package.json里的dependencies有没有jquery 没有就自己添加（版本记得和你下载的一致）

　　　　　　"dependencies": {

　　　　

　　　　　　　　"jquery" : "^3.3.7"  

　　　　　　},

 

 

 

然后再运行网页应该就可以啦！！！自己写一段代码试试检查一下