快捷導航

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

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

這篇文章主要給大家介紹了關(guān)于搭建VUE+VScode+elementUI開發(fā)環(huán)境的相關(guān)資料,近期被配置環(huán)境的事情弄得整個人都要炸了,現(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。或者點擊這里也可下載

（2）點擊64-bit就開始下載了。

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

（4）安裝完成后可以使用cmd（win+r然后輸入cmd進入）測試下是否安裝成功。

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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用來項目構(gòu)建、打包、資源整合等。

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

如果一直卡在這里

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

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

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

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

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

沒有錯誤提示后，重新安裝。

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

npm install vue-cli -g

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

3.新建項目

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

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

（3）選擇配置項，這里選擇了Babel、Router、Vuex、Linter/Formatter三個選項，然后回車。

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

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

hash
history

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

（6）代碼語法錯誤檢查，這里選擇ESLint + Standard config，這個是標準的，然后回車。

（7）選擇檢查代碼語法的時機，這里選擇第一個Lint on save（保存時檢查），然后回車。

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

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

(10)項目搭建完成。

（11）按照提示，運行項目：

cd vue01
npm run serve

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

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

4.安裝VScode

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

（1）在官方網(wǎng)站https://code.visualstudio.com/，下載最新版本?；蛘?a href="http://www.dbjr.com.cn/softs/538363.html" target="_blank">點擊這里下載

提示：藍色按鈕會自動識別電腦操作系統(tǒng)，到適合的版本，只需要點擊下載即可

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

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

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

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

6.打開已新建的項目

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

（2）在VScode終端運行項目。

（3）在地址欄輸入http://192.168.0.203:8081/或者Ctrl+單擊地址，可以直接打開VUE起始頁。

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，找到組件，任意選擇一個組件，這里以Button按鈕舉例。

（4）打開代碼，復(fù)制幾個按鈕代碼。

<el-row>
  <el-button>默認按鈕</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">危險按鈕</el-button>
</el-row>

（5）打開AboutView組件，將這段代碼添加進去，用以測試elementUI是否正常引入。

（6）重新運行項目。

npm run serve

（7)因為前面使用了Eslint語法檢查，所以文件中出現(xiàn)語法錯誤均會進行檢查，可以按照提示進行修改，也可以按照提示暫時忽略語法。

（8）保存運行，點擊About打開AboutView頁面。

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

總結(jié)

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

您可能感興趣的文章: