?1、使用npm全局安裝vue-cli（前提是你已經(jīng)安裝了nodejs狠角，否則你連npm都用不了）鼻吮，切換到安裝位置潜必，我這邊安裝到F盤

1.1、按住shift+鼠標(biāo)右擊彈出圖1范嘱，選擇“在此處打開命令窗口”

圖1

1.2馍惹、在窗口輸入npm install --global vue-cli（如果安裝失敗可以使用淘寶鏡像安裝萎战，先安裝npm install -g cnpm --registry=https://registry.npm.taobao.org 安裝完后用cnpm install --global vue-cli這樣就大功告成了８眯铩）

圖2

2碍现、創(chuàng)建新項(xiàng)目?vue init webpack newVue

?2.1、 Project name (newVue) ?項(xiàng)目名稱晓勇，可以自己指定堂飞，也可直接回車灌旧，按照括號中默認(rèn)名字（注意這里的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters）酝静，阮一峰老師博客為什么文件名要小寫节榜，可以參考一下羡玛。

2.2别智、Project description (A Vue.js project)? 項(xiàng)目描述，也可直接點(diǎn)擊回車稼稿，使用默認(rèn)名字

2.2薄榛、Author (........)?????? 作者

2.3、Install vue-router? (Y/n)??? 是否安裝vue-router

2.4让歼、Use ESLint to lint your code? (Y/n)?是否使用ESLint管理代碼敞恋。

2.5、Pick an ESLint preset (Use arrow keys) ?Standard (https://github.com/feross/standard)??? 標(biāo)準(zhǔn)

2.6谋右、Setup unit tests with Karma + Mocha? (Y/n)? 是否安裝單元測試硬猫，我選擇安裝

2.7、Setup e2e tests with Nightwatch(Y/n)?? ?? 是否安裝e2e測試 改执，我選擇安裝

圖3

3啸蜜、安裝完成（如圖4）

圖4

3.1、進(jìn)入安裝好項(xiàng)目 cd newVue

3.2辈挂、運(yùn)行項(xiàng)目 npm run dev

圖6

4衬横、運(yùn)行完成后地址?http://localhost:8080/#/

圖7

5、安裝less

安裝less依賴终蒂，npm install less less-loader --save

修改webpack.config.js文件蜂林，配置loader加載依賴，讓其支持外部的less,在原來的代碼上添加

{

test: /\.less$/,

loader: "style-loader!css-loader!less-loader",

},

現(xiàn)在基本上已經(jīng)安裝完成了拇泣，然后在使用的時候在style標(biāo)簽里加上lang=”less”里面就可以寫less的代碼了(style標(biāo)簽里加上 scoped 為只在此作用域 有效)（或者@import'./index.less'; //引入全局less文件）噪叙。

6、安裝sass

cnpm install node-sass --save-dev? ?//安裝node-sass

cnpm install sass-loader --save-dev? //安裝sass-loader

cnpm install style-loader --save-dev? //安裝style-loader 有些人安裝的是 vue-style-loader 其實(shí)是一樣的霉翔！

這個時候你打開build文件夾下面的webpack.base.config.js

{

test: /\.scss$/,

loaders: ["style", "css", "sass"]

}

7睁蕾、新建style文件夾，新建index.scss

1早龟、@import './login.less'（在index.scss引用）

2惫霸、在App.vue文件里面引用全局css

<style lang="scss">

? @import "./styles/index.scss";

</style>

8、安裝element-ui

1葱弟、npm i element-ui -S

2壹店、按需引入

npm install babel-plugin-component -D

3、然后芝加，將 .babelrc 修改為：

{ "presets": [ [ "env", {"modules": false }],"stage-2"],"plugins": ["transform-runtime",[

? ?"component",[ {"libraryName": "element-ui","styleLibraryName": "~theme" }]]]}

接下來硅卢，如果你只希望引入部分組件射窒，比如 Button 和 Select，那么需要在 main.js 中寫入以下內(nèi)容：

import Vue from 'vue';

import { Button} from 'element-ui';

import App from './App.vue';

import {Button} from 'element-ui';

Vue.use(Button)