一巷蚪、安裝node.js(https://nodejs.org/en/)
注意:推薦使用 node-v8.11.0-x64,具體安裝步驟下一步即可
二、設(shè)置nodejs prefix(全局)和cache(緩存)路徑
1碉就、在nodejs安裝路徑下午阵,新建node_global和node_cache兩個(gè)文件夾
image.png
2、設(shè)置緩存文件夾和全局模塊存放路徑
npm config set cache "D:\application\nodejs\node_cache"
npm config set prefix "D:\application\nodejs\node_global"
三浑娜、基于 Node.js 安裝cnpm(淘寶鏡像)以及升級(jí)npm至最新版本
1佑力、npm install -g npm --- 升級(jí)npm到最新版本
2、npm install -g cnpm --registry=https://registry.npm.taobao.org --- 安裝cnpm(淘寶鏡像)
四筋遭、設(shè)置環(huán)境變量(非常重要)
1打颤、鼠標(biāo)右鍵"此電腦",選擇“屬性”菜單漓滔,在彈出的“系統(tǒng)”對(duì)話(huà)框中左側(cè)選擇“高級(jí)系統(tǒng)設(shè)置”编饺,彈出“系統(tǒng)屬性”對(duì)話(huà)框。
2响驴、修改系統(tǒng)變量PATH
image.png
3透且、新增系統(tǒng)變量NODE_PATH
image.png
五、安裝vue命令行工具豁鲤,即vue-cli3 腳手架
1秽誊、vue-cli3 訪問(wèn)地址: [https://cli.vuejs.org/guide/installation.html](https://cli.vuejs.org/guide/installation.html)
2、安裝命令: npm install -g @vue/cli # OR yarn global add @vue/cli
3琳骡、注意:如果事先安裝 vue-cli 則可以使用 npm uninstall vue-cli -g 卸載
a:vue-cli 對(duì)應(yīng)的版本(2.x..)
b:@vue/cli 對(duì)應(yīng)的版本(3.x..)
4锅论、輸入vue --version 查看版本即可
六、采用vue-cli3 腳手架創(chuàng)建Vue項(xiàng)目
1楣号、運(yùn)行 vue ui
image.png
2最易、省略(界面是中文界面,按照流程下一步操作即可)
3怒坯、目錄結(jié)構(gòu)簡(jiǎn)易描述
image.png
七、運(yùn)行Vue項(xiàng)目
1耘纱、運(yùn)行 npm run serve 指令即可
image.png
八敬肚、細(xì)節(jié)注意事項(xiàng)
- 注意在安裝vue-cli3 并查看版本的時(shí)候不是3.x版本而是2.x(2.9.6等)
- 解決辦法:在安裝Node.js的時(shí)候使用 【推薦版本即可 = node-v8.11.0】