項(xiàng)目搭建

安裝vue-cli

npl install vue-cli -g

vue init webpack my-project ?初始化項(xiàng)目

npm install ?安裝項(xiàng)目依賴 ?-->>npm run build 生成上線目錄部署

nmp run dev

在localhost啟動(dòng)測(cè)試服務(wù)器

步驟一

1.完成node.js安裝搭建

目的:配合前端開(kāi)發(fā)搭建 為全局工作

方法:通過(guò)官網(wǎng)下載 安裝 ?.msi文件(微軟標(biāo)準(zhǔn)安裝包文件)

驗(yàn)證:

通過(guò)cmd 命令窗口 ?輸入node 進(jìn)入node工作狀態(tài)

輸入console.log(1); 驗(yàn)證node是否可以工作

退出

輸入npm -v 查詢版本

2.配置環(huán)境變量

配置"主機(jī)用戶變量"(環(huán)境變量上面一欄) ?設(shè)置PATH 變量 值為C:\Users\lenovo\AppData\Roaming\npm

3.git-bash軟件安裝配置

4.cd 項(xiàng)目地址

5.cnpm install安裝依賴

說(shuō)明:cnpm為國(guó)內(nèi)常用下載依賴配置方式 ?國(guó)外一般用npm 當(dāng)然 以實(shí)際速度為準(zhǔn)

易產(chǎn)生問(wèn)題:npm 與cnpm版本不一致

建議使用別名設(shè)置方法

步驟二

1.安裝腳手架工具

輸入cnpm install vue-cli -g

2.輸入vue --help 看常用命令

3.輸入vue -V 看版本

4.輸入vue list 看官方模板,

5.輸入vue init webpack 項(xiàng)目包名字

項(xiàng)目名輸入

項(xiàng)目描述?

作者

ESLint 代碼檢查工具 使用了會(huì)對(duì)你代碼格式進(jìn)行嚴(yán)格檢查

測(cè)試工具是否使用

完成項(xiàng)目創(chuàng)建

6.項(xiàng)目創(chuàng)建后?

主要文件在src中建立 ?

主頁(yè)為index.html?

package.json為主要的配置文件

其中有兩個(gè)腳本為:

dev : node bulid/dev-server.js

build : node build/build.js

開(kāi)發(fā)依賴內(nèi)容為devDepencies

7.**進(jìn)行項(xiàng)目依賴按照

進(jìn)入項(xiàng)目文件中

輸入cnpm install?

項(xiàng)目依賴配置完成

按照完畢后 項(xiàng)目文件夾多一個(gè)node_modules/ 目錄?

8.輸入npm run dev?

項(xiàng)目啟動(dòng)

9.npm run build ?生成項(xiàng)目部署文件