Vuex官方文檔
Element Plus官方文檔
TypeScript中文網(wǎng)
Vue3中文文檔

創(chuàng)建項(xiàng)目

使用開(kāi)發(fā)工具為：Visual studio Code

全局安裝vite

npm install -g create-vite-app

創(chuàng)建項(xiàng)目命令：

npm init vite <project-name>

依次選擇 vue -> vue-ts

image.png

回車，項(xiàng)目創(chuàng)建完成，項(xiàng)目結(jié)構(gòu)如下

image.png

安裝項(xiàng)目中需要的依賴

npm install 

運(yùn)行項(xiàng)目

npm run dev

配置目錄別名

1.編輯vite.config.ts文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

const path = require("path");

function _resolve(dir: string) {
  return path.resolve(__dirname, dir);
}

// https://vitejs.dev/config/
export default defineConfig({
  //配置目錄別名
  resolve: {
    alias: {
      "/@": _resolve("src"),
      "/@components": _resolve("src/components"),
      "/@assets": _resolve("src/assets")
    },
  },
  plugins: [vue()],
});

安裝上面配置需要的依賴

npm install path --save
npm i --save-dev @types/node

2.編輯tsconfig.json文件

添加baseurl塞茅，path配置

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
      "/@/*": ["src/*"],
      "/@components/*": ["src/components/*"],
      "/@assets/*": ["src/assets/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

測(cè)試：將App.vue 中的

import HelloWorld from './components/HelloWorld.vue'

改成

import HelloWorld from '/@components/HelloWorld.vue'

按住ctrl递览，鼠標(biāo)點(diǎn)擊HelloWorld.vue可以正常跳轉(zhuǎn)即為配置成功绸吸。

項(xiàng)目啟動(dòng)端口及請(qǐng)求轉(zhuǎn)發(fā)配置

編輯tsconfig.ts文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  //配置目錄別名
  plugins: [vue()],
  server: {
    open: false, // 項(xiàng)目啟動(dòng)完成后是否自動(dòng)在瀏覽器打開(kāi)
    port: 3000, // 項(xiàng)目啟動(dòng)端口
    host: '0.0.0.0', //解決項(xiàng)目啟動(dòng)后尼啡，控制臺(tái)出現(xiàn) Network: use `--host` to expose的問(wèn)題
    https: false,// 使用的是http協(xié)議則設(shè)置為false蹋嵌，https協(xié)議則設(shè)置為true
    //配置請(qǐng)求代理
    proxy: {
        '/api': {
            //所有的接口請(qǐng)求都會(huì)被代理到這個(gè)路徑上逗嫡，后臺(tái)網(wǎng)關(guān)地址為http://127.0.0.1:10000/青自，所以配置的是這個(gè)
            target: 'http://127.0.0.1:10000/',
            /**
             * 重寫路徑，api及之前的會(huì)被替換為target的內(nèi)容
             * 當(dāng)我們?cè)跒g覽器中看到請(qǐng)求的地址為：http://127.0.0.1/api/account-server/user/login
             * 實(shí)際上訪問(wèn)的地址是：http://127.0.0.1:10000/account-server/user/login
             */
            rewrite: (path) => path.replace(/^\/api/, ''),
            ws: true, // 是否啟用webSockets
            secure: false, // 使用的是http協(xié)議則設(shè)置為false 安全證書校驗(yàn)
            //是否開(kāi)啟跨域 前后端分離項(xiàng)目此項(xiàng)開(kāi)啟
            changeOrigin: true,
        }
    },
},
});

多環(huán)境變量配置

1.安裝cross-env

cross-env 通過(guò)js在平臺(tái)設(shè)置不同的環(huán)境變量的工具

npm install --save-dev cross-env

2.根環(huán)境目錄下創(chuàng)建環(huán)境配置文件驱证、

.env # 在所有的環(huán)境中被載入
.env.local # 在所有的環(huán)境中被載入延窜，但會(huì)被 git 忽略
.env.[mode] # 只在指定的模式中被載入
.env.[mode].local # 只在指定的模式中被載入，但會(huì)被 git 忽略

如：開(kāi)發(fā)環(huán)境抹锄，創(chuàng)建文件 .env.dev逆瑞，內(nèi)容如下

#環(huán)境名稱
NODE_ENV = dev
#項(xiàng)目構(gòu)建環(huán)境
VITE_BUILD_ENV = 'dev'
#后臺(tái)訪問(wèn)地址
VITE_APP_BASE_API = 'http://127.0.0.1:3000'

生產(chǎn)環(huán)境，創(chuàng)建文件 .env.prod伙单，內(nèi)容如下

#環(huán)境名稱
NODE_ENV = prod
#項(xiàng)目構(gòu)建環(huán)境
VITE_BUILD_ENV = 'prod'
#后臺(tái)訪問(wèn)地址
VITE_APP_BASE_API = 'http://10.52.0.38'

3.編輯package.json scripts配置項(xiàng)

"scripts": {
    "dev": "cross-env vite --mode dev",
    "test": "cross-env vite --mode test",
    "prod": "cross-env vite --mode prod",
    "build": "vite build",
    "build:dev": "vite build --mode dev",
    "build:test": "vite build --mode test",
    "build:prod": "vite build --mode prod"
  }

4.項(xiàng)目中獲取配置的請(qǐng)求BASE_URL

const BASE_URL=import.meta.env.VITE_APP_BASE_API
console.log(BASE_URL)

打印結(jié)果：http://10.52.0.38
是我們?cè)?env.prod 配置的url

vite 獲取環(huán)境變量url 的方式為：import.meta.env

項(xiàng)目打包配置

1.編輯配置文件tsconfig.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],

  //項(xiàng)目打包配置
  build: {
    target: "modules",
    outDir: "dist", // 打包文件指定輸出路徑
    assetsDir: "static", // 指定生成靜態(tài)資源的存放路徑
    minify: "terser", // 混淆器,terser構(gòu)建后文件體積更小
    // 移除console
    terserOptions: {
      compress: {
        drop_console: true, // 生產(chǎn)環(huán)境移除console
        drop_debugger: true, // 生產(chǎn)環(huán)境移除debugger
      },
    },
    //配置多頁(yè)面
    rollupOptions: {
      treeshake: false,
      //壓縮最小輸入
      output: {
        manualChunks(id: any) {
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        },
      },
    },
  },
});

2.項(xiàng)目打包

package.json scripts配置的是開(kāi)發(fā)環(huán)境為 "build:dev": "vite build --mode dev"获高，則開(kāi)發(fā)環(huán)境打包命令為

npm run build:dev

Sass配置，css預(yù)編譯配置

1.安裝sass依賴吻育，依次執(zhí)行一下命令

npm i sass
npm i sass-loader
npm i node-sass

assets目錄下創(chuàng)建文件夾scss念秧，scss目錄下創(chuàng)建預(yù)處理的scss文件，如

mixin.scss

@mixin no-wrap($lines) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
}

// 單行文本超出隱藏并顯示...省略號(hào)
@mixin line-text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//多行文本超過(guò)行數(shù)顯示省略號(hào)布疼，只適用于WebKit及移動(dòng)端
@mixin text-overflow($line: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
}

/* 四周陰影 */
@mixin box-shadow($bulr: 10px, $color: rgba(189, 205, 211, 0.5)) {
  -webkit-box-shadow: 0 0 $bulr $color;
  -moz-box-shadow: 0 0 $bulr $color;
  box-shadow: 0 0 $bulr $color;
}

// flex布局
@mixin layout($dir: column, $justify: center, $align: right) {
  display: flex;
  flex-direction: $dir;
  justify-content: $justify;
  align-items: $align;
}

@mixin userselect($val: none) {
  -webkit-user-select: $val;
  -moz-user-select: $val;
  -ms-user-select: $val;
  user-select: $val;
}

variable.scss

$page-user-select: none;

3.編輯tsconfig.ts文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  //css預(yù)處理配置 全局引入scss文件
  css: {
    preprocessorOptions: {
      scss: {
        charset: false,
        additionalData:
          ` @import "/@assets/scss/mixin"; @import "/@assets/scss/variable";` 
      },
    },
  },
});