vue3

vuecli3.0腳手架搭建及環境配置配置

2018年08月25日 14:08:31  素燃 閱讀數：2600

 

參考文檔https://cli.vuejs.org/zh/

• 1

1.安裝
npm install -g @vue/cli

2.檢查安裝
vue -V  

3.建立項目
vue create project_name 
出現下圖信息

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

4.上圖兩種選擇方式，第一種是默認的，第二種本身選擇配置
  這裏通常選擇第二種本身配置，點擊回車鍵後出現下圖信息

• 1
• 2

5.在上圖中選擇你須要的模塊，上下移動，空格進行肯定，下圖是測試選擇的

• 1

6.選好後，敲Enter鍵，接着選擇

• 1

7.選擇完畢後，一路Enter，到下圖

• 1

8.模板建立完成，目錄以下

• 1

9.配置測試環境接口，線上服務器環境接口
（經過在項目根目錄下新建.env    .env.development  .env.production文件來控制）
以下圖

• 1
• 2
• 3

在目錄里加入了3個文件
.env.development 開發環境文件
.env.production 線上環境文件

在上邊3個文件中:
使用VUE_APP_URL = 「接口url」
書寫格式：VUE_APP_[自定義name]

配置打包環境

• 1

打包後在本地預覽,你須要啓動一個node服務：
1.npm install -g serve  //全局安裝服務
2.serve -s dist   // 啓動服務預覽
獲取當前的環境:
console.log(process.env.VUE_APP_URL)

• 1
• 2
• 3
• 4
• 5
• 6
• 7

10. 其它配置寫在.vue.config.js文件中
在根目錄下新建
包括端口號，代理跨域，熱更新，多入口等，具體參考官方api
https://cli.vuejs.org/zh/config/#vue-config-js

• 1
• 2
• 3
• 4