vite 创建vue3项目 （vue-router、vuex、scss、环境变量、selint、stylelint、normalize.css）

目录

一. 创建基础vue项目

二. 安装vue-router

三. 设置路径别名 @

四. vuex

五. SCSS

六. 环境变量

七. eslint 

八. stylelint

九. normalize.css

---

一. 创建基础vue项目

npm create vite@latest

输入项目名称

选择 vue -> vue-ts

进入目录 运行 npm run install 与 npm run dev 便可运行

env.d.ts中加入

declare module '*.vue' {
   import type { DefineComponent } from 'vue'
   const component: DefineComponent<{}, {}, any>
   export default component
}

二. 安装vue-router

npm install vue-router -S

src下新建 router/index.ts

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

const routes:Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Index',
    component: () => import("../views/index.vue")
  },
  {
    path: '/list',
    name: 'List',
    component: () => import("../views/list.vue")
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes
});
export default router;

在 main.ts 中引入router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'


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

app.vue 中添加 router-view

<template>
  <router-view />
</template>

三. 设置路径别名 @

安装 @types/node

npm i --save-dev @types/node

修改 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' // 此处

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: { // 此处
    alias: {
      '@': path.resolve(__dirname, "src")
    }
  }
})

修改 tsconfig.json   compilerOptions 下新增 baseUrl paths

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
    // ...
  },
}

设置好后 在router.js 中便可使用@引入 .vue

四. vuex

安装

npm install vuex@next --save

env.d.ts 中加入声明 

declare module "vuex" {
   export * from "vuex/types/index.d.ts";
   export * from "vuex/types/helpers.d.ts";
   export * from "vuex/types/logger.d.ts";
   export * from "vuex/types/vue.d.ts";
}

src 新建 store/index.ts

import { createStore } from 'vuex'

interface Data {
    a: Number,
    b: String
}

export interface State {
    data: Data
}

const state: State = {
    data: {
        a: 1,
        b: '1',
    }
}

// 创建一个新的 store 实例
const store = createStore({
  state: state
})

export default store

main.js 中引入

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


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

.vue中使用

<script setup lang="ts">
import { ref } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

const a = store.state.data.a

const count = ref(0)
</script>

<template>
  <div>
    index {{ a }}
  </div>
</template>

<style scoped>

</style>

五. SCSS

安装

npm install --save-dev sass

使用

<style scoped lang="scss">
$color: red;
.div {
  span {
    color: $color;
  }
}
</style>

六. 环境变量

根目录下创建 .env.development 与 .env.production

文件中配置环境比变量（需要用 VITE 开头）

# 开发环境
VITE_VUE_APP_BASE_API = '/'

代码中使用

console.log('import', import.meta.env)

七. eslint 

安装 vite-plugin-eslint

npm install vite-plugin-eslint 

vite.config.js 中添加

import eslintPlugin from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // ...
    eslintPlugin({
      cache: false // 禁用 eslint 缓存
    })
  ]
})

安装 eslint 相关包

npm install eslint eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-typescript -D

根目录下新建 .eslintrc.js  并根据npm安装的包配置

（package.json中有 "type": "module" 需要将.js改为.cjs）

// 包支持
// eslint
// eslint-plugin-vue
// @typescript-eslint/eslint-plugin
// @typescript-eslint/parser
// @vue/eslint-config-typescript

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-recommended', // eslint-plugin-vue
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    '@typescript-eslint/no-var-req/uires': 'off', // 可以require
    '@typescript-eslint/no-explicit-any': 'off', // 允许any
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    indent: [1, 2], // 缩进
    // ...其他配置太多省略
  },
  overrides: [
    {
      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
      env: {
        mocha: true
      }
    }
  ]
}

八. stylelint

npm install stylelint stylelint-config-property-sort-order-smacss stylelint-config-recommended stylelint-config-standard stylelint-scss -D

根目录下新建 .stylelintrc.js 根据npm安装的包配置

（package.json中有 "type": "module" 需要将.js改为.cjs）

注：stylelint需要降级到 13    .stylelintrc.js中附我使用的包版本

// 包支持
// "stylelint": "^13.13.1",
// "stylelint-config-property-sort-order-smacss": "^7.1.0",
// "stylelint-config-recommended": "^5.0.0",
// "stylelint-config-standard": "^22.0.0",
// "stylelint-scss": "^3.21.0",

module.exports = {
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-standard',
    'stylelint-config-property-sort-order-smacss'
  ],
  plugins: ['stylelint-scss'],
  rules: {
    'indentation': 2,
    'color-no-invalid-hex': true, 
    'at-rule-no-unknown': null,
    'scss/at-rule-no-unknown': true,
    'no-descending-specificity': null,
    'no-empty-source': null,
    'selector-pseudo-element-no-unknown': null,
    'property-case': null,
    'property-no-unknown': null,
    'declaration-block-trailing-semicolon': null,
  }
}

九. normalize.css

 npm i normalize.css --save

main.js 引入

import 'normalize.css/normalize.css'