vue3項目初始化及相關配置

1.安裝vue

yarn global add @vue/cli

 

2.初始化項目

vue create vue-test

tip:如果報錯，則是因為未配置環境變量

windows系統參考https://www.cnblogs.com/LHLVS/p/11328124.html

mac 系統

yarn global dir

(1)找到yarn global安裝路徑后，比如路徑如下

/Users/username/.config/yarn/global/node_modules/.bin

(2)修改~/.bash_profile

終端執行 vim ~/.bash_profile

加一行. export PATH="$PATH:/Users/username/.config/yarn/global/node_modules/.bin"

加完后再執行source ~/.bash_profile 讓命令生效

 

3.使用less/sass

(1)yarn add less@2.7.3 less-loader@6.0.0 --save less只能安裝3.0以下版本

(2)全局使用定義的less變量文件

yarn add style-resources-loader vue-cli-plugin-style-resources-loader -D
然后在vue.config.js添加以下配置

// vue.config.js

const path = require('path');

module.exports = {
  // ...
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      // 引入需要全局加載的 less 文件
      patterns: [path.resolve(__dirname, './src/styles/var.less')],
    },
  },
};

 

 

4.使用vue-router

yarn add vue-router@4 --save 要指定4版本

在main.js中 添加 import router from './router'

createApp(App).use(router).mount('#app')

 

5.使用animate

npm install animate.css@3.5.1 --save

在main.js中   import animated from 'animate.css'

Vue.use(animated)

在視圖中使用

<div class="animated zoomIn">

animate測試

</div>

 

6.使用mock

參考

yarn add mockjs --save-dev

添加mock文件夾 添加index.js util.js

//util.js

const fs = require('fs')                        
const path = require('path')
 
module.exports = {
    // 用於被index.js進行調用
    getJsonFile (filePath) {
        // 讀取指定的json文件
        const json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
        // 解析並返回
        return JSON.parse(json)
    }
}

　　

//index.js

const Mock = require('mockjs')
const util = require('./util')

module.exports = function (app) {

    app.get('/api/articleList', (rep, res) => {
        // 響應時，返回 mock data的json數據
        const articleList = util.getJsonFile('./article-list.json')
        res.json(Mock.mock(json))
    })
    app.get('/api/bannerList', (rep, res) => {
        // 響應時，返回 mock data的json數據
        // const articleList = util.getJsonFile('./article-list.json')
        // 將json傳入 Mock.mock 方法中，生成的數據返回給瀏覽器
        res.json(Mock.mock({
            'list|3': [{
                'url': '@image',
                'id|+1': 1, //屬性 id 是一個自增數，起始值為 1，每次增 1
            }]
        }))
    })
}

　　

在配置文件中添加配置 devServer:{

before:require('./src/mock/index')

}

接口請求和index.js里的本地接口路徑一致，這樣請求的時候就會攔截成mock數據。

 

7.在根目錄中創建vue.config.js

module.exports = {
  outputDir: 'dist', // 打包的目錄
  lintOnSave: true, // 在保存時校驗格式
  productionSourceMap: false, // 生產環境是否生成 SourceMap
  devServer: {
    open: true, // 啟動服務后是否打開瀏覽器
    overlay: { // 錯誤信息展示到頁面
      warnings: true,
      errors: true
    },
    host: '0.0.0.0',
    port: 8066, // 服務端口
    https: false,
    hotOnly: false,
    // proxy: { // 設置代理
    //   '/api': {
    //     target: host,
    //     changeOrigin: true,
    //     pathRewrite: {
    //       '/api': '/',
    //     }
    //   },
    // },
  },
}

8.使用typescript

1.在創建項目的時候。選擇Manually select features" 選項，然后選擇 "TypeScript"

2.在原有項目上改造為 ts 項目

vue add typescript

或者一步一步引入

（1）yarn add typescript -D
（2）在根目錄創建 tsconfig.json 文件：      

{
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    // 與 Vue 的瀏覽器支持保持一致
    "target": "es5",
    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",
    // 這可以對 `this` 上的數據 property 進行更嚴格的推斷
    "strict": true,
    "moduleResolution": "node"
  }
}

（3）src 目錄下的 main.js 文件名改為 main.ts，以及其他 js 文件改為 ts 后綴

（4）在根目錄下添加shims-vue.d.ts 

/* shims-vue.d.ts */
declare module '*.vue' {
  import { defineComponent } from 'vue';

  const component: ReturnType<typeof defineComponent>;
  export default component;
}

 (5)在<script> 標簽上聲明 lang="ts"，為了讓 TypeScript 能夠正確推斷 Vue 組件中的類型，需使用defineComponent