搭建vite + vue3 + typescript

搭建vite + vue3 + typescript

• 1.使用vite搭建项目
• 2.安装vue-router
• 3.安装vuex
• 4.安装eslint
• 安装sass
• 配置 tsconfig.json
• 配置 vite.config.ts

1.使用vite搭建项目

兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。

npm init vite@latest || yarn create vite
// 提示需要安装create-vite@latest
Need to install the following packages:
  create-vite@latest
Ok to proceed? (y) y
// 项目名称
? Project name: » vite-project
// 选择框架
? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
>   vue
    react
    preact
    lit
    svelte
? Select a variant: » - Use arrow-keys. Return to submit.
    vue
>   vue-ts
cd vite-project
npm i
npm run dev

2.安装vue-router

npm install vue-router@4

配置vue-router

在项目src目录下面新建router目录，然后添加index.ts文件，在文件中添加以下内容

import { createRouter, createWebHashHistory } from 'vue-router'

// 在 Vue-router新版本中，需要使用createRouter来创建路由
export default createRouter({
  // 指定路由的模式,此处使用的是hash模式
  history: createWebHashHistory(),
  // 路由地址
  routes: []
})

3.安装vuex

npm install vuex@next

在项目src目录下面新建store目录，并添加index.ts文件，文件中添加以下内容

import { createStore } from 'vuex'

interface State {
  userName: string
}

export default createStore({
  	state:{
  	userName:'王大合'
  	}
});

在main.ts中引入 vue-router 和 vuex

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
import store from "./store";

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

4.安装eslint

npm install eslint --save-dev
eslint --init
 
// 如何使用ESLint
? How would you like to use ESLint? (Use arrow keys)
  To check syntax only // 只检查语法
> To check syntax and find problems // 检查语法和发现问题
  To check syntax, find problems, and enforce code style // 检查语法、发现问题并实施代码样式
  
//您的项目使用什么类型的模块
? What type of modules does your project use? (Use arrow keys)
> JavaScript modules (import/export) // JavaScript模块
  CommonJS (require/exports) // CommonJS
  None of these // 其他
  
//您的项目使用哪个框架(根据情况选择)
? Which framework does your project use? (Use arrow keys)
  React
> Vue.js
  None of these
 
//项目是否使用TypeScript
? Does your project use TypeScript? (y/N) 
 
? Where does your code run?  //您的代码在哪里运行 (空格选中、a全选 i反选)
>(*) Browser // 浏览器
 ( ) Node // node
 
? What format do you want your config file to be in? (Use arrow keys) //您希望生成的配置文件是什么格式的
  JavaScript
  YAML
> JSON
 
// 具有一下依赖项 是否安装
The config that you've selected requires the following dependencies:
eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now with npm? (Y/n)

打开.eslintrc.json 适当修改

{
    "env": {
        "browser": true,
        "es2021": true,
        // 解决 defineProps和defineEmits 生成 no-undef警告；
        "vue/setup-compiler-macros": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    // 添加自定义规则
    "rules": {
        "@typescript-eslint/no-explicit-any": ["off"], // 关闭any类型的警告
        "key-spacing": [0, { "beforeColon": false, "afterColon": true }], //对象字面量中冒号的前后空格
        "vue/no-v-model-argument": 0, // 解决v-model:props编辑器报错
        "array-bracket-spacing": ["error","always"], // 强制在括号内使用空格
        "object-curly-spacing": ["error","always"] // 强制在花括号中使用一致的空格
    }
}

安装sass

npm install sass
npm install sass-loader

配置 tsconfig.json

在 compilerOptions 下增加如下配置

    // 解析非相对模块的基地址，默认是当前目录
    "baseUrl": ".",
    //路径映射，相对于baseUrl
    "paths": { "@/*": [ "src/*" ] }

配置 vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 使用相对地址
  base:'./',
  resolve: {
  // 设置@符号全局路径
    alias: {
      '@': resolve(__dirname, './src')
    }
  },
  server: {
  	// 跨域配置
    proxy: {
      '/api': {
        target: 'http://localhose:8033',  // 接口域名
        changeOrigin: true,
        rewrite: (path: string) => path.replace(/^\/api/, '')
      }
    }
  },
  css:{
    preprocessorOptions: {
      scss: {
      // 配置全局样式
        additionalData: `@import "./src/assets/style/theme.scss";`
      }
    }
  }
})