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的引用

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