搭建VUE項目框架(2) 創建項目

搭建開發環境

Node.js官方地址：https://nodejs.org/zh-cn/

下載安裝版本：14.15.4長期支持版(LTS)

Visual Studio Code官網地址：https://code.visualstudio.com/

下載安裝版本：Windows x64

省略安裝步驟了，注意的一點就是安裝路徑最好修改一下

安裝路徑：D:\Programs\VSCode

安裝插件

• Chinese (Simplified) Language Pack for Visual Studio Code
• Auto Rename Tag
• Element UI Snippets
• HTML CSS Support
• Live Server
• Node Snippets
• open in browser
• Path Intellisense
• Vetur
• Vue 2 Snippets

開始創建項目

1. 打開項目的父路徑

   D:\VueStudy\

2. 在文件路徑里面輸入cmd命令回車，會彈出cmd窗口

   D:\WebStudy>
   

3. 輸入創建項目模板命令

   ## 獲取模板項目
   ## devextreme-vue-mes 就是你項目文件夾名稱
   npx -p devextreme-cli devextreme new vue-app devextreme-vue-mes
   
   ## 這里選Vue version (v2)，然后按回車鍵
   ?What verion do you want?
   > Vue version (v2)
     vue version (v3)
   ## 這里選Side navigation (outer toolbar)，然后回車
   ?What layout do you want to add?
   > Side navigation (outer toolbar)
     Side navigation (inner toolbar)
   ## 安裝會稍微時間長一點，耐心等待
   ## 類似信息說明完成安裝
   added 188 packages from 167 contributors in 50.693s
   

4. 啟動項目

   ## 用Visual Studio Code打開項目父文件夾
   ## 在項目路徑下 [集成終端]中 輸入
   npm run serve
   
   ## 按住Ctrl鍵鼠標左鍵 http://localhost:8080/devextreme-vue-template/
     - Local:   http://localhost:8080/devextreme-vue-template/    
     - Network: http://192.168.0.101:8080/devextreme-vue-template/
   

5. 運行結果

   

配置項目

添加文件

vue.config.js：項目文件夾的根目錄上添加

module.exports = {
  devServer: {
    port: 8001, // 端口號，如果端口號被占用，會自動提升1
    host: "localhost", //主機名， 127.0.0.1，  真機 0.0.0.0
    https: false, //協議
    open: true, //啟動服務時自動打開瀏覽器訪問
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: process.env.VUE_APP_SERVICE_URL,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '',
        }

      }
    }
},

lintOnSave: false, // 關閉格式檢查
productionSourceMap: false, // 打包時不會生成 .map 文件，加快打包速度 
// filenameHashing: false, 打包時，靜態文件不會生成hash值
};

.env.development:項目文件夾的根目錄上添加

# 開發模式的配置信息
# 服務接口地址
VUE_APP_SERVICE_URL = http://localhost:3000/api/

# base api
VUE_APP_BASE_API = '/dev-api'

.env.production:項目文件夾的根目錄上添加

# 生產模式的配置信息
# 服務接口地址
VUE_APP_SERVICE_URL = 'http://localhost:7300/mock/5ffdc31567ed59160bfb3156'

# base api
VUE_APP_BASE_API = '/pro-api'

備份模板

項目模板文件夾：VueTemplate文件夾

做好項目模板之后，我們要把項目模板存起來，以后可以繼續用