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 瀏覽器會自動彈出一個歡迎頁面

要點來了

六、引入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"  

　　　　　　},

 

 

 

而後再運行網頁應該就能夠啦！！！本身寫一段代碼試試檢查一下