手把手教你搭建VUE+VScode+elementUI開(kāi)發(fā)環(huán)境
1.安裝node.js
按照VUE必須先要安裝node.js
（1）打開(kāi)NodeJs官網(wǎng)：https://nodejs.org/en/download/ ，根據(jù)系統(tǒng)下載，Windows操作系統(tǒng)一般選擇是64-bit。
（2）點(diǎn)擊64-bit就開(kāi)始下載了。
（3）雙擊安裝，安裝過(guò)程基本直接“NEXT”就可以了。（windows的安裝msi文件在過(guò)程中會(huì)直接添加path的系統(tǒng)變量，變量值是你的安裝路徑，例如“C:\Program Files\nodejs”）
（4）安裝完成后可以使用cmd（win+r然后輸入cmd進(jìn)入）測(cè)試下是否安裝成功。
（5）在cmd下輸入node -v，出現(xiàn)下圖版本提示就是完成了NodeJS的安裝（不用過(guò)渡糾結(jié)版本）。
（6）npm的安裝。由于新版的NodeJS已經(jīng)集成了npm，所以之前npm也一并安裝好。也可以查看npm的版本。cmd下輸入npm -v,即可查看。
2.安裝vue相關(guān)的工具
（1）安裝webpack
webpack用來(lái)項(xiàng)目構(gòu)建、打包、資源整合等。
npm install webpack –g （也有很多同學(xué)使用cnpm，這兩個(gè)就不進(jìn)行過(guò)多的介紹了，簡(jiǎn)單來(lái)說(shuō)，如果網(wǎng)絡(luò)好，其實(shí)都一樣cnpm需要再安裝一下）。
如果一直卡在這里
就需要修改下鏡像的地址即可，采用taobao的鏡像地址，進(jìn)入’ cmd '之后輸入：
npm config set registry https://registry.npm.taobao.org然后回車(chē)。
輸入npm config get registry ，查看是否安裝成功：
沒(méi)有錯(cuò)誤提示后，重新安裝。
（2）安裝vue-cli腳手架構(gòu)建工具
npm install vue-cli -g
完成以上操作，我們需要準(zhǔn)備的基本環(huán)境和工具都準(zhǔn)備好了，接下來(lái)就開(kāi)始使用vue-cli來(lái)構(gòu)建項(xiàng)目。
3.新建項(xiàng)目
（1）新建一個(gè)存放項(xiàng)目的路徑，如在D盤(pán)新建vuetest文件夾，然后將路徑設(shè)置到該文件夾。
（2）新建項(xiàng)目 vue create vue01，這里選擇第三個(gè)Manually select features自定義選項(xiàng)操作并回車(chē)（至于第一個(gè)和第二個(gè)選項(xiàng)可以快速搭建帶eslint和babel的項(xiàng)目）。
（3）選擇配置項(xiàng)，這里選擇了Babel、Router、Vuex、Linter/Formatter三個(gè)選項(xiàng)，然后回車(chē)。
（4）選擇vue版本，這里選擇vue2，然后回車(chē)。
（5）選擇router的模式，vue-router分為兩種模式
hash
history
這里選擇history模式，所以輸入Y,然后回車(chē)（如果使用hash,則輸入n）。
（6）代碼語(yǔ)法錯(cuò)誤檢查，這里選擇ESLint + Standard config，這個(gè)是標(biāo)準(zhǔn)的，然后回車(chē)。
（7）選擇檢查代碼語(yǔ)法的時(shí)機(jī)，這里選擇第一個(gè)Lint on save（保存時(shí)檢查），然后回車(chē)。
（8）第三方配置文件存在的方式，這里選擇第一個(gè)In dedicated config files，然后回車(chē)。
（9）是否保存本次配置為預(yù)設(shè)項(xiàng)目模板，這里選擇N(也可以選擇Y，這樣下次可以直接使用該配置方案快速搭建項(xiàng)目)，然后回車(chē)，等待項(xiàng)目搭建成功。
(10)項(xiàng)目搭建完成。
（11）按照提示，運(yùn)行項(xiàng)目：
cd vue01
npm run serve
（12）在地址欄輸入http://192.168.0.203:8081/，可以直接打開(kāi)VUE起始頁(yè)。
4.安裝VScode
為了更好編譯項(xiàng)目，以及引入elementUI，建議安裝編譯器VScode，前面的新建項(xiàng)目過(guò)程也可以直接在VScode的終端運(yùn)行。
（1）在官方網(wǎng)站https://code.visualstudio.com/，下載最新版本。
提示：藍(lán)色按鈕會(huì)自動(dòng)識(shí)別電腦操作系統(tǒng)，到適合的版本，只需要點(diǎn)擊下載即可
（2）下載完成后，直接點(diǎn)擊安裝，根據(jù)提示下一步即可，安裝完成后第一次打開(kāi)的界面。
5.VSCode 界面轉(zhuǎn)換為中文
（1）使用簡(jiǎn)體中文語(yǔ)言包插件，作用：將 VSCode 操作界面轉(zhuǎn)換為中文，對(duì)英語(yǔ)不好的朋友，非常友好。
（2）安裝完成后重啟一下，即是漢化版。
6.打開(kāi)已新建的項(xiàng)目
（1）“文件”—“打開(kāi)文件夾”—找到D：/vuetest，直接選擇該文件夾，項(xiàng)目同時(shí)包含在其中。
（2）在VScode終端運(yùn)行項(xiàng)目。
（3）在地址欄輸入http://192.168.0.203:8081/或者Ctrl+單擊地址，可以直接打開(kāi)VUE起始頁(yè)。
7.引入elementUI
(1)VScode安裝ElementUI。
npm i element-ui -S
(2)在main.js中引入ElementUI。
import Vue from 'vue'
import ElementUI from 'element-ui';// 添加
import 'element-ui/lib/theme-chalk/index.css'; // 添加
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false // 添加 取消生產(chǎn)提示
Vue.use(ElementUI);// 添加
new Vue({
router,
render: h => h(App)
}).$mount('#app')
（3）打開(kāi)elementUI官網(wǎng)https://element.eleme.io/#/zh-CN，找到組件，任意選擇一個(gè)組件，這里以Button按鈕舉例。
（4）打開(kāi)代碼，復(fù)制幾個(gè)按鈕代碼。
<el-row>
<el-button>默認(rèn)按鈕</el-button>
<el-button type="primary">主要按鈕</el-button>
<el-button type="success">成功按鈕</el-button>
<el-button type="info">信息按鈕</el-button>
<el-button type="warning">警告按鈕</el-button>
<el-button type="danger">危險(xiǎn)按鈕</el-button>
</el-row>
（5）打開(kāi)AboutView組件，將這段代碼添加進(jìn)去，用以測(cè)試elementUI是否正常引入。
（6）重新運(yùn)行項(xiàng)目。
npm run serve
（7)因?yàn)榍懊媸褂昧薊slint語(yǔ)法檢查，所以文件中出現(xiàn)語(yǔ)法錯(cuò)誤均會(huì)進(jìn)行檢查，可以按照提示進(jìn)行修改，也可以按照提示暫時(shí)忽略語(yǔ)法。
（8）保存運(yùn)行，點(diǎn)擊About打開(kāi)AboutView頁(yè)面。
（9）AboutView頁(yè)面正常顯示elementUI的Button按鈕組件，說(shuō)明環(huán)境全部搭建完成。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-698497.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-698497.html
到了這里，關(guān)于手把手教你搭建VUE+VScode+elementUI開(kāi)發(fā)環(huán)境的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
