Vue-Cli腳手架基本搭建以及JQ，bootstrap，less，字體的引入

Vue cli

的安裝

Vue cli

使用中常常會遇到依賴沒有安裝徹底(沒有安裝全)

下面是須要安裝的

建議由有一些js，html，css基礎的小夥子的觀看

1. VUEX (單向數據，狀態管理器，小項目不須要)

2. Jquery

3. Less

4.字體包

5. Resource (ajax不是vue官網更新的axios建議使用這個)

6. Router (如今版本都有的基本不用下)

先看下本身的node版本和npm的版本

能夠下一個淘寶的cnpm鏡像包npm install -g cnpm --registry=http://registry.npm.taobao.org（不建議下載由於會有一些依賴會少）

$ npm install -g vue-cli

安裝

vuecli

$ vue init webpack firstApp       安裝基於webpack的項目

其餘的基本一致空格下去就能夠

$ cd firstApp    進入項目

$ npm install    安裝依賴

上面第一個紅框報錯最後的紅框解決

可能會遇到多個錯誤

就多npm install幾回一隻到沒有錯誤

而後咱們就能夠打開項目了

$ npm run dev

這樣咱們的基本的就出來了下面咱們安裝一下

下面的

cnpm install vue-router vue-resource --save Resource

的下載

npm install jquery --save                            jq的下載

cnpm install vuex --save                             vuex的下載

cnpm install less --save-dev                        less的下載

而後咱們修改

const webpack = require("webpack");    前面引入webpack

'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
jquery: "jquery/src/jquery"

（能夠複製）

{
test: /\.css$/,
loader: "style-loader!css-loader"
},

（能夠複製

這個是

CSS

的引入）

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
},

（能夠複製

這個是

CSS

的引入）

{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader?mimetype=image/svg+xml'
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader?mimetype=application/font-woff"
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader?mimetype=application/font-woff"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader?mimetype=application/octet-stream"
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader"
},

（能夠複製）

plugins: [// 3.

配置全局使用

jquery
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
})],

最後在

main

裏面引入

bootstrap

可能會報錯

那麼就在

index裏面引入JQ的cdn先用着

Less的引用

而後基本的就搭建完成的了！=.=不喜勿噴