vue3.0創建一個項目

使用vue3.0創建一個項目

1. 使用Vue UI創建、管理項目
2. 項目結構目錄整理
3. 初始文件添加
4. 基本配置
5. 跨域配置

 

環境配置

下面嘗試用test、preview、production分別表示測試、預覽、生產三種環境

修改package.json文件如下

"scripts":{
    "serve":"vue-cli-service serve",
    "test":"vue-cli-service build --mode test",         //測試
    "preview":"vue-cli-service build --mode preview",   //預覽
    "build":"vue-cli-service build --mode production"   //生產
    "lint":"vue-cli-service lint" 
}

在項目根目錄下新建 .env.test 、 .env.preview 、 .env.production文件，分別對應三個環境的配置文件，注意，名字要與 --mode后面的名字分別對應

.env.test代碼如下

NODE_ENV = "test"
VUE_APP_BASE_URL ="測試環境域名"

.env.prod代碼如下

NODE_ENV = "production"
VUE_APP_BASE_URL ="生產環境域名"

.env.pre代碼如下

NODE_ENV = "preview"
VUE_APP_BASE_URL ="預覽環境域名"

這樣環境配置好了，分別用以下命令來打包不同環境的包就可以了

npm run test         //測試
npm run prod       //生產
npm run pre         //預發布

另外說明一點事，本地環境會默認從.env.development文件中讀取配置

所以記得需要新建一個然后存放配置

.env.development代碼如下

NODE_ENV ="development"
VUE_APP_BASE_URL="本地環境域名"

 

項目配置

從vue-cli3.0 開始build和config目錄就取消了，如果需要修改配置，可以在項目的根目錄新建一個vue.config.js文件來覆蓋項目的配置，訪問官方文檔查看詳細配置

// vue.config.js
module.exports = {
  // 選項...
}

• baseUrl  

  • 從 Vue CLI 3.3 起已棄用，請使用publicPath。

• publicPath

  • Type : string
  • Default : '/'　　
  • 用法和 webpack 本身的 output.publicPath 一致，不要直接修改webpack的output.publicPath

• outputDir

  • Type : string
  • Default : 'dist'
  • 提示： outputDir 而不要修改 webpack 的 output.path

• assetsDir

  • Type : string
  • Default : ' '
  • 提示： 從生成的資源覆寫filename 或 chunkFilename時，assetsDir 會被忽略

• indexPath

  • Type : string
  • Default : 'index.html'
  • 指定生成的index.html 的輸出路徑(相對於 outputDir).也可以是絕對路徑

• pages

  • Type : Object
  • Default : undefined
  • 在multi-page 模式下構建應用。每個"pages"應該有一個對應的Javascript入口文件。其值應該是一個對象，對象的key是入口的名字，value是：
    • 一個制定了entry, template, filename, title 和 chunks 的對象(除了 entry 之外都是可選的)
    • 或一個指定其entry的字符串

      module.exports = {
        pages: {
          index: {
            // page 的入口
            entry: 'src/index/main.js',
            // 模板來源
            template: 'public/index.html',
            // 在 dist/index.html 的輸出
            filename: 'index.html',
            // 當使用 title 選項時，
            // template 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'Index Page',
            // 在這個頁面中包含的塊，默認情況下會包含
            // 提取出來的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'index']
          },
          // 當使用只有入口的字符串格式時，
          // 模板會被推導為 `public/subpage.html`
          // 並且如果找不到的話，就回退到 `public/index.html`。
          // 輸出文件名會被推導為 `subpage.html`。
          subpage: 'src/subpage/main.js'
        }
      }

 

路由詳解（一）--基礎：

1. router-link和router-view組件
2. 路由配置
   1. 動態路由
   2. 嵌套路由
   3. 命名路由
   4. 命名視圖
3. JS操作路由
4. 重定向和別名