初次環(huán)境搭建
第1步:安裝Node.js 去node.js官網(wǎng)下載windows對(duì)應(yīng)版本计呈,安裝即可慌植。?
?驗(yàn)證node.js是否安裝成功:?
?????????????????????????node -v npm -v
第2步:解決npm安裝第三方模塊很慢問(wèn)題,建議使用cnpm淘寶鏡像??
官網(wǎng)地址:https://developer.aliyun.com/mirror/NPM?from=tnpm?
? 全局安裝cnpm這個(gè)工具? -g 表示全局安裝虐先,一次安裝秉扑,永久使用?
?????????????????????????npm install -g cnpm?
--registry=https://registry.npm.taobao.org?
第3步:安裝vue腳手架工具 -g 表示全局安裝?
?????????????????????????cnpm install @vue/cli -g?
第4步:創(chuàng)建vue項(xiàng)目先進(jìn)入目標(biāo)目錄?
? ? ? ? ? ? ? ? ? ? ? ? ? vue create vue-study?
在創(chuàng)建項(xiàng)目的過(guò)程中吸占,可能會(huì)涉及到vue版本的選擇巧鸭,建議選擇2.0? 如果還需要選擇包管理工具瓶您,建議使用 npm
第5步:?jiǎn)?dòng)vue項(xiàng)目? # 進(jìn)入項(xiàng)目的根目錄?
????????????????????????????npm run serve?
?在瀏覽器中通過(guò)本地服務(wù)來(lái)訪問(wèn)vue項(xiàng)目 自己配置一個(gè)start命令? npm start
如果當(dāng)前代碼沒(méi)有node_modules包 執(zhí)行`cnpm install`可以根據(jù)package.json文件進(jìn)行重裝
多次搭建后
在 Git Bash命令行中
創(chuàng)建vue文件夾 :
vue create hello-world(項(xiàng)目名)
進(jìn)入hello-world文件夾:
cd /d/hello-world
安裝狀態(tài)管理 :?
cnpm install vuex -S?
vscode中在package.json旁邊創(chuàng)建一個(gè)vue.config.js文件
在vue.config.js中寫(xiě)如下代碼:
在package.json中寫(xiě):
安裝路由:
cnpm install vue-router-S
創(chuàng)建/src/router.js并編寫(xiě)路由規(guī)則:
在main.js文件中掛載
在視圖app.vue中使用<router-view></router-view>放在div標(biāo)簽中
安裝sass:????
? ? ? ? ? ? ? ? ? ? ? ? ?cnpm install sass-loader -D
? ? ? ? ? ? ? ? ? ? ? ? ?cnpm install node-sass -D
? ? ? ? ? ? ? ? ? ? ? ? ?組件中的style標(biāo)簽夜赵,使用lang='scss'指定CSS語(yǔ)言類型
安裝van組件庫(kù):
????????????????????????Vant官方文檔:https://vant-contrib.gitee.io/vant/#/zh-CN/
????????????????????????cnpm install vant -S
????????????????????????cnpm install babel-plugin-import -D
????????????????????????Babel是運(yùn)行在Node.js環(huán)境中的JS編譯器。
????????????????????????它的作用是把ES6代碼轉(zhuǎn)化成瀏覽器兼容性更好的ES5代碼乡革。