Vue3 + vite + ts 项目搭建

Vue3 项目搭建

1. 环境准备：

vue 版本由2.9.6 升级到4.x

使用npm update -g @vue/cli 没有用，未升级成功。

npm install -g @vue/cli

2. 创建項目（vite）：

在网上看到有如下三种创建方式，任选其一即可：

2.1 vite-app 方式：

直接一键创建vue3项目（默认创建的是JavaScript）。

npm init vite-app hello-vue3 

# OR 
yarn create vite-app hello-vue3

2.2 @vitejs/app方式：

手动配置创建Vue3项目：

npm init @vitejs/app hello-vue3

• 选择vue
  
• 选择JavaScript 还是 typescript方式
  
• 创建成功
  

2.3 一键创建vue3 Ts 项目：

# npm 6.x
npm init @vitejs/app hello-vue3-ts --template vue-ts

# npm 7+ (需要额外的双横线)
npm init @vitejs/app hello-vue3-ts -- --template vue-ts

# yarn
yarn create @vitejs/app hello-vue3-ts --template vue-ts

2.4 Ts项目比Js多两个配置文件

tsconfig.json和vite.config.ts

3. 集成UI组件

3.1. 安装UI（如：ant desgin vue）

npm install ant-design-vue@next --save

安装成功后，package.json中增加：

  "dependencies": {
    "ant-design-vue": "^2.2.6",
  },

3.2. 按需加载

• 安装vite-plugin-components

npm i --save vite-plugin-components

• 配置vite.config.ts文件

import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components';
export default defineConfig({
  plugins: [
      vue(),
      ViteComponents({
        customComponentResolvers: [AntDesignVueResolver()],
      })
  ]
})

4. 集成路由vue-router

# 安装指定版本4.x
npm i vue-router@4 --save

安装成功后，package.json中增加：

  "dependencies": {
    "vue-router": "^4.0.11"
  },

5. 集成状态Vuex

npm i vuex@next --save

安装成功后，package.json中增加：

  "dependencies": {
    "vuex": "^4.0.2"
  },

6. 集成Axios

npm i axios --save

安装成功后，package.json中增加：

  "dependencies": {
    "axios": "^0.21.1",
  },

7. 集成Less

• 安装less

npm i less --save

安装成功后，package.json中增加：

  "dependencies": {
    "less": "^4.1.1",
  },

• 配置vite.config.ts

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true // 使用 less 编写样式的 UI 库（如 antd）时建议加入这个设置
      }
    }
  },
})

• 配置less 全局变量
  在main.ts：
  import './styles/var.less'
  需要在vite.config.ts中配置css，便可以在组件中使用var.less中定义的变量（如 @orange: #FAAD14）了

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `@import "./src/styles/var.less";`, // 设置预编译var.less 文件
        javascriptEnabled: true // 使用 less 编写样式的 UI 库（如 antd）时建议加入这个设置
      }
    }
  },
})

vite配置CSS官方文档

8. 配置alias

• 安装 @rollup/plugin-node-resolve
  为了能在配置中，使用require , __dirname 。
  npm i --save-dev @rollup/plugin-node-resolve

• 配置vite.config.ts文件

import { defineConfig } from 'vite'
const { resolve } = require('path')

export default defineConfig({
  resolve: {
    alias: [
      {
        find: "@",
        replacement: resolve(__dirname, 'src')
      }
    ]
  }
})

9. 集成echarts

npm install echarts --save
具体使用见官方文档，很清晰。