一、安裝Node.js以及配置環(huán)境變量
1、Node獲取地址
https://nodejs.org/en/download
一直默認(rèn)選項(xiàng)安裝，安裝好了之后，在環(huán)境變量中會(huì)自動(dòng)配置Node的地址，可以在cmd中使用 node -v/npm -v命令驗(yàn)證是否下載成功
2、設(shè)置Node的配置內(nèi)容
（1）在安裝目錄下新建兩個(gè)文件夾命名為node_cache，和node_global：
其中node_cache是作為緩存目錄來使用的，node_global就是全局下載文件的目錄；
（2）以管理員身份打開cmd,輸入以下2條命令
npm config set prefix "xxx\Node\node_global" npm config set cache "xxx\Node\node_cache"
（3）為了之后使用npm下載東西時(shí)速度快一些，需要配置鏡像站，這里選擇淘寶鏡像，以管理員身份打開cmd
npm config set registry=http://registry.npm.taobao.org //配置鏡像站
npm config list //顯示所有配置信息 檢查一下鏡像站行不行命令
npm config get registry
3、設(shè)置環(huán)境變量
（1）【系統(tǒng)變量】，“新建”環(huán)境變量:
NODE_PATH=xxx\Node\node_global\node_modules
（2）【PATH】變量中，增加
xxx\Node
xxx\Node\node_global
（3）【用戶變量】對(duì)path環(huán)境變量添加
xx\Node xx\Node\node_global
（4）確認(rèn)并保存；
4、創(chuàng)建項(xiàng)目
（1）vue create test_platform （2）npm run server
5、如上的命令要在管理員下運(yùn)行
6、其他查看命令
（1）顯示所有配置信息
npm config list
（2）查看全局和緩存地址配置或者鏡像配置
npm config get registry
npm config get prefix
npm config get cache
（3）配置淘寶鏡像文章來源地址http://www.zghlxwxcb.cn/news/detail-735951.html
npm config set registry https://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npm.taobao.org
二、Pycharm配置以及Vue相關(guān)
1、在pycharm中安裝插件Vue.js
2、設(shè)置在pycharm中可以使用vue相關(guān)命令
(1)以管理員身份運(yùn)行PowerShell (2)PS C:\WINDOWS\system32> set-ExecutionPolicy RemoteSigned (3)PS C:\WINDOWS\system32> A
3、創(chuàng)建&運(yùn)行項(xiàng)目
在django項(xiàng)目的根目錄下面創(chuàng)建前端項(xiàng)目 vue create projectname cd 前端項(xiàng)目名 npm run serve 訪問項(xiàng)目地址
4、其他
（1）如下兩個(gè)命令行的區(qū)別
npm install vue-cli -g(安裝2.x版本的腳手架)
npm install -g @vue/cli(安裝vue3以上版本的腳手架)/npm install -g vue-cli@版本號(hào)/npm install -g @vue/cli@版本號(hào)
（2）@vue/cli3與vue-cli2的區(qū)別
①創(chuàng)建項(xiàng)目 vue create （vue/cli3） vue init webpack appname(vue-cli2)； ②啟動(dòng)項(xiàng)目 由npm run dev 改成 npm run serve； ③移除了配置文件目錄 config 和 build 文件夾，如果需要自定義配置，需要自己新建vue.config.js文件； ④移除了 static 靜態(tài)資源文件夾，新增 public 文件夾，靜態(tài)資源轉(zhuǎn)移到public目錄中，通過/xx.xx可以直接訪問，并且 index.html 移動(dòng)到 public 中； ⑤在 src 文件夾中新增了 views 文件夾，用于分類 視圖組件 和 公共組件； ⑥安裝項(xiàng)目時(shí)會(huì)自動(dòng)下載node-model文件夾；
三、Vue項(xiàng)目結(jié)構(gòu)說明
1、項(xiàng)目結(jié)構(gòu)圖
├── node_modules ├── public │ ├── favicon.ico: 頁簽圖標(biāo) │ └── index.html: 主頁面 ├── src │ ├── assets: 存放靜態(tài)資源 │ │ └── logo.png │ │── component: 存放組件 │ │ └── HelloWorld.vue │ │── App.vue: 匯總所有組件 │ │── main.js: 入口文件 ├── .gitignore: git版本管制忽略的配置 ├── babel.config.js: babel的配置文件 ├── package.json: 應(yīng)用包配置文件 ├── README.md: 應(yīng)用描述文件 ├── package-lock.json：包版本控制文件
2、配置文件參考
https://cli.vuejs.org/zh/config/#publicpath
文章來源：http://www.zghlxwxcb.cn/news/detail-735951.html
到了這里，關(guān)于二、搭建前后端分離的自動(dòng)化測(cè)試平臺(tái)的前端Vue3+Element-plus前端項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
