快捷導(dǎo)航

一步步教你搭建VUE+VScode+elementUI開發(fā)環(huán)境

更新時(shí)間：2023年07月24日 15:20:10 作者：wdyan297

這篇文章主要給大家介紹了關(guān)于搭建VUE+VScode+elementUI開發(fā)環(huán)境的相關(guān)資料,近期被配置環(huán)境的事情弄得整個(gè)人都要炸了,現(xiàn)在整理如下,希望有相同需求的朋友可以不用走彎路,需要的朋友可以參考下

1.安裝node.js

按照VUE必須先要安裝node.js

（1）打開NodeJs官網(wǎng)：https://nodejs.org/en/download/ ，根據(jù)系統(tǒng)下載，Windows操作系統(tǒng)一般選擇是64-bit?；蛘?a href="http://www.fzitv.net/jiaoben/42236.html" target="_blank">點(diǎn)擊這里也可下載

（2）點(diǎn)擊64-bit就開始下載了。

（3）雙擊安裝，安裝過程基本直接“NEXT”就可以了。（windows的安裝msi文件在過程中會(huì)直接添加path的系統(tǒng)變量，變量值是你的安裝路徑，例如“C:\Program Files\nodejs”）

（4）安裝完成后可以使用cmd（win+r然后輸入cmd進(jìn)入）測(cè)試下是否安裝成功。

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-r3S7QQ4M-1684206275119)(C:\Users\WDY\AppData\Roaming\Typora\typora-user-images\image-20230514153144260.png)]$

（5）在cmd下輸入node -v，出現(xiàn)下圖版本提示就是完成了NodeJS的安裝（不用過渡糾結(jié)版本）。

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-94BFF4Rk-1684206275120)(C:\Users\WDY\AppData\Roaming\Typora\typora-user-images\image-20230514153249709.png)]$

（6）npm的安裝。由于新版的NodeJS已經(jīng)集成了npm，所以之前npm也一并安裝好。也可以查看npm的版本。cmd下輸入npm -v,即可查看。

2.安裝vue相關(guān)的工具

（1）安裝webpack

webpack用來項(xiàng)目構(gòu)建、打包、資源整合等。

npm install webpack –g （也有很多同學(xué)使用cnpm，這兩個(gè)就不進(jìn)行過多的介紹了，簡(jiǎn)單來說，如果網(wǎng)絡(luò)好，其實(shí)都一樣cnpm需要再安裝一下）。

如果一直卡在這里

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-jZvsO4ti-1684206275120)(C:\Users\WDY\AppData\Roaming\Typora\typora-user-images\image-20230514161946259.png)]$

就需要修改下鏡像的地址即可，采用taobao的鏡像地址，進(jìn)入’ cmd '之后輸入：

npm config set registry https://registry.npm.taobao.org然后回車。

輸入npm config get registry ，查看是否安裝成功：

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-AVZymvln-1684206275121)(C:\Users\WDY\AppData\Roaming\Typora\typora-user-images\image-20230514161921907.png)]$

沒有錯(cuò)誤提示后，重新安裝。

（2）安裝vue-cli腳手架構(gòu)建工具

npm install vue-cli -g

完成以上操作，我們需要準(zhǔn)備的基本環(huán)境和工具都準(zhǔn)備好了，接下來就開始使用vue-cli來構(gòu)建項(xiàng)目。

3.新建項(xiàng)目

（1）新建一個(gè)存放項(xiàng)目的路徑，如在D盤新建vuetest文件夾，然后將路徑設(shè)置到該文件夾。

（2）新建項(xiàng)目 vue create vue01，這里選擇第三個(gè)Manually select features自定義選項(xiàng)操作并回車（至于第一個(gè)和第二個(gè)選項(xiàng)可以快速搭建帶eslint和babel的項(xiàng)目）。

（3）選擇配置項(xiàng)，這里選擇了Babel、Router、Vuex、Linter/Formatter三個(gè)選項(xiàng)，然后回車。

（4）選擇vue版本，這里選擇vue2，然后回車。

（5）選擇router的模式，vue-router分為兩種模式

hash
history

這里選擇history模式，所以輸入Y,然后回車（如果使用hash,則輸入n）。

（6）代碼語(yǔ)法錯(cuò)誤檢查，這里選擇ESLint + Standard config，這個(gè)是標(biāo)準(zhǔn)的，然后回車。

（7）選擇檢查代碼語(yǔ)法的時(shí)機(jī)，這里選擇第一個(gè)Lint on save（保存時(shí)檢查），然后回車。

（8）第三方配置文件存在的方式，這里選擇第一個(gè)In dedicated config files，然后回車。

（9）是否保存本次配置為預(yù)設(shè)項(xiàng)目模板，這里選擇N(也可以選擇Y，這樣下次可以直接使用該配置方案快速搭建項(xiàng)目)，然后回車，等待項(xiàng)目搭建成功。

(10)項(xiàng)目搭建完成。

（11）按照提示，運(yùn)行項(xiàng)目：

cd vue01
npm run serve

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-ERYILu8Y-1684206275124)(C:\Users\WDY\AppData\Roaming\Typora\typora-user-images\image-20230515143423546.png)]$

（12）在地址欄輸入http://192.168.0.203:8081/，可以直接打開VUE起始頁(yè)。

4.安裝VScode

為了更好編譯項(xiàng)目，以及引入elementUI，建議安裝編譯器VScode，前面的新建項(xiàng)目過程也可以直接在VScode的終端運(yùn)行。

（1）在官方網(wǎng)站https://code.visualstudio.com/，下載最新版本。或者點(diǎn)擊這里下載

提示：藍(lán)色按鈕會(huì)自動(dòng)識(shí)別電腦操作系統(tǒng)，到適合的版本，只需要點(diǎn)擊下載即可

（2）下載完成后，直接點(diǎn)擊安裝，根據(jù)提示下一步即可，安裝完成后第一次打開的界面。

5.VSCode 界面轉(zhuǎn)換為中文

（1）使用簡(jiǎn)體中文語(yǔ)言包插件，作用：將 VSCode 操作界面轉(zhuǎn)換為中文，對(duì)英語(yǔ)不好的朋友，非常友好。

（2）安裝完成后重啟一下，即是漢化版。

6.打開已新建的項(xiàng)目

（1）“文件”—“打開文件夾”—找到D：/vuetest，直接選擇該文件夾，項(xiàng)目同時(shí)包含在其中。

（2）在VScode終端運(yùn)行項(xiàng)目。

（3）在地址欄輸入http://192.168.0.203:8081/或者Ctrl+單擊地址，可以直接打開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）打開elementUI官網(wǎng)https://element.eleme.io/#/zh-CN，找到組件，任意選擇一個(gè)組件，這里以Button按鈕舉例。

（4）打開代碼，復(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）打開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打開AboutView頁(yè)面。

（9）AboutView頁(yè)面正常顯示elementUI的Button按鈕組件，說明環(huán)境全部搭建完成。

總結(jié)

到此這篇關(guān)于搭建VUE+VScode+elementUI開發(fā)環(huán)境的文章就介紹到這了,更多相關(guān)VUE+VScode+elementUI開發(fā)環(huán)境搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: