1.配置node環(huán)境

1）下載node安裝包并安裝

2）安裝完成之后在配置node的環(huán)境變量

3) 查看node是否安裝成功：

win+r 進(jìn)入輸入cmd進(jìn)入命令行，輸入 node -v 命令 ，安裝成功之后會(huì)顯示node的版本號(hào)

在命令行，輸入 npm -v 命令 ，查看npm的版本號(hào)

2.安裝webpack

命令行工具輸入：npm install webpack -g 全局安裝webpack，安裝完后輸入：webpack -v，出現(xiàn)版本號(hào)則標(biāo)識(shí)安裝成功

3.安裝vue-cli腳手架

全局安裝vue腳手架，命令行工具輸入：npm install vue-cli -g，安裝完后輸入vue -V（此處必須大寫“V”），出現(xiàn)版本號(hào)則標(biāo)識(shí)安裝成功

4.創(chuàng)建vue項(xiàng)目

1）打開命令行工具，進(jìn)入放項(xiàng)目的文件夾，輸入命令：vue init webpack mysite（其中webpack是模板名稱），會(huì)在當(dāng)前目錄下生成一個(gè)mysite項(xiàng)目文件夾

2）進(jìn)入項(xiàng)目文件：cd mysite，安裝項(xiàng)目依賴：npm install（如果失敗，則用淘寶鏡像源：cnpm install）

3）安裝vue路由模塊vue-router和網(wǎng)絡(luò)請(qǐng)求模塊vue-resource：cnpm install vue-router vue-resource --save

4）啟動(dòng)項(xiàng)目npm run dev，默認(rèn)會(huì)直接打開一個(gè)頁面，或者在瀏覽器中輸入http://localhost:8080

5.項(xiàng)目目錄結(jié)構(gòu)

bulid目錄是webpack相關(guān)配置文件，已配置好，一般不需要修改

config是vue項(xiàng)目的基本配置文件，配置端口，打包輸出等

node_modules是項(xiàng)目中安裝的依賴模塊

src項(xiàng)目核心文件，自己寫的代碼都在這里

>>assets靜態(tài)資源，如css，less，sass，一些外部的js文件以及圖片等

>>components公共組件

>>router路由，配置項(xiàng)目路由

>>App.vue根組件

>>main.js入口文件

static靜態(tài)資源

test測試文件夾

6.使用element-ui前端ui組件

1）打開命令提示工具，安裝element-ui：npm i element-ui -S

2）main.js中引入element-ui

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

6.打包上線

項(xiàng)目開發(fā)完成后，在命令行中輸入npm run build進(jìn)行打包，打包完成后會(huì)生成dist文件夾，可以本地直接查看。

項(xiàng)目上線時(shí)，將dist文件夾放到服務(wù)器即可