vite2 + vue3项目一、vite 项目初始化 Vite2.0 的发布带来了对低版本浏览器的构建支持，使其可以正式

一、`vite` 项目初始化

Vite（法语意思是 “快”，发音为 /vit/，类似 veet）是一种全新的前端构建工具。你可以把它理解为一个开箱即用的开发服务器 + 打包工具的组合，但是更轻更快。Vite 利用浏览器原生的 ES 模块支持和用编译到原生的语言开发的工具（如 esbuild）来提供一个快速且现代的开发体验。

Vite2.0 的发布带来了对低版本浏览器的构建支持，使其可以正式投入项目生产。

vite 官方中文文档：cn.vitejs.dev/guide/

1.1 初始化项目

npm init vite@latest

Need to install the following packages:
  create-vite@latest
Ok to proceed? (y) y
√ Project name: ... vite2-antd
√ Select a framework: » vue
√ Select a variant: » vue

1.2 vite2 配置

1.2.1 别名

在vite.config.js配置别名

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

import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      comps: path.resolve(__dirname, 'src/components'),
      apis: path.resolve(__dirname, 'src/apis'),
      views: path.resolve(__dirname, 'src/views'),
      utils: path.resolve(__dirname, 'src/utils'),
      routes: path.resolve(__dirname, 'src/routes'),
      styles: path.resolve(__dirname, 'src/styles'),
      layouts: path.resolve(__dirname, 'src/layouts'),
      plugins: path.resolve(__dirname, 'src/plugins'),
    },
  },
  plugins: [vue()]
})

1.2.2 JSX支持

安装@vitejs/plugin-vue-jsx

npm install @vitejs/plugin-vue-jsx -D

在vite.config.js配置JSX

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入JSX支持
import vueJsx from '@vitejs/plugin-vue-jsx'

import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    // 别名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      comps: path.resolve(__dirname, 'src/components'),
      apis: path.resolve(__dirname, 'src/apis'),
      views: path.resolve(__dirname, 'src/views'),
      utils: path.resolve(__dirname, 'src/utils'),
      routes: path.resolve(__dirname, 'src/routes'),
      styles: path.resolve(__dirname, 'src/styles'),
      layouts: path.resolve(__dirname, 'src/layouts'),
      plugins: path.resolve(__dirname, 'src/plugins'),
    },
  },
  plugins: [vue(), vueJsx()]
})

1.3 整合`vue-router 4.x` 和 `vuex 4.x`

安装vue-router 4.x 和 vuex 4.x包

npm install vue-router@4 vuex@next

在src下新建views/Home.vue

<template>
  <div>
    <HelloWorld msg="Hello Vue 3 + Vite" />
  </div>
</template>

<script setup>
 import HelloWorld from '@/components/HelloWorld.vue'
</script>

<style lang="scss" scoped>

</style>

在src下新建router/index.js、store/index.js router/index.js

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

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('../views/Home.vue'),
    }
  ],
})

export function setupRouter(app) {
  app.use(router);
}

export default router

store/index.js

import { createStore } from 'vuex'

const store = createStore({
  state: {
    couter: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
})


export function setupStore(app) {
  app.use(store, key);
}

export default store;

在main.js引入router、vuex

import { createApp } from "vue";
import router, { setupRouter } from "./router"; // 路由 ++
import App from "./App.vue";

const app = createApp(App);

setupRouter(app); // 引入路由

router.isReady().then(() => {
  app.mount("#app");
});

修改App.vue


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

<style>
#app {
  width: 100%;
  height: 100%;
}
</style>

1.4 `Sass/Scss` 预处理器

安装sass依赖

npm install -D sass

是的，就这么简单，以前用vuecli的时候，还要安装sass-loader、node-sass什么的，但是vite其实安装sass就可以了。

配置全局的scss文件，在src下新建styles/main.scss、styles/normalize.scss styles/main.scss

@import "normalize.scss"; // 重置浏览器样式

// color
.color-white { color: white; }

// font-size
.fs-12 { font-size: 12px; }

// text-align
.text-center { text-align: center; }

// float
.float-right { float: right; }

// margin
.ml-10 { margin-left: 10px; }
.mr-10 { margin-right: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }

// padding
.pt-30 { padding-top: 30px; }

// width
.w-200 { width: 200px; }

styles/normalize.scss 重置浏览器样式文件可自行查找 3. 在vite.config.js里配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入JSX支持
import vueJsx from '@vitejs/plugin-vue-jsx'

import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    // 别名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      comps: path.resolve(__dirname, 'src/components'),
      apis: path.resolve(__dirname, 'src/apis'),
      views: path.resolve(__dirname, 'src/views'),
      utils: path.resolve(__dirname, 'src/utils'),
      routes: path.resolve(__dirname, 'src/routes'),
      styles: path.resolve(__dirname, 'src/styles'),
      layouts: path.resolve(__dirname, 'src/layouts'),
      plugins: path.resolve(__dirname, 'src/plugins'),
    },
  },
  plugins: [vue(), vueJsx()],
  // sass 全局样式
  css: {
    preprocessorOptions: {
      // 引入公用的样式
      scss: {
        additionalData: `@import "@/styles/main.scss";`,
      },
      less: {
        modifyVars: {},
        javascriptEnabled: true,
      },
    },
  },
})

1.5 Ant Design of Vue 按需加载

Ant Design of Vue安装

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

安装插件按需加载

npm i vite-plugin-components -D

配置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入JSX支持
import vueJsx from '@vitejs/plugin-vue-jsx'
// UI按需加载
import ViteComponents, { AntDesignVueResolver } from "vite-plugin-components";

import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    // 别名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      comps: path.resolve(__dirname, 'src/components'),
      apis: path.resolve(__dirname, 'src/apis'),
      views: path.resolve(__dirname, 'src/views'),
      utils: path.resolve(__dirname, 'src/utils'),
      routes: path.resolve(__dirname, 'src/routes'),
      styles: path.resolve(__dirname, 'src/styles'),
      layouts: path.resolve(__dirname, 'src/layouts'),
      plugins: path.resolve(__dirname, 'src/plugins'),
    },
  },
  plugins: [
    vue(),
    vueJsx(),
    ViteComponents({
      // 组件库导入处理
      customComponentResolvers: [AntDesignVueResolver()],
    }),
  ],
  css: {
    preprocessorOptions: {
      // 引入公用的样式
      scss: {
        additionalData: `@import "@/styles/main.scss";`,
      },
      less: {
        modifyVars: {},
        javascriptEnabled: true,
      },
    },
  },
})

1.6 `ConfigProvider` 全局化配置

修改App.vue


<template>
  <a-config-provider :locale="locale">
    <router-view></router-view>
  </a-config-provider>
</template>

<script setup>
import locale from "ant-design-vue/es/locale/zh_CN";
</script>

<style>
#app {
  width: 100%;
  height: 100%;
}
</style>

1.7 `eslint`、`prettier`配置

安装依赖

# 安装eslint 
npm i eslint babel-eslint eslint-plugin-vue @vue/cli-plugin-babel @vue/eslint-config-standard eslint-plugin-node eslint-plugin-promise eslint-plugin-import -D
# 安装prettier 
npm install --save-dev prettier eslint-plugin-prettier @vue/eslint-config-prettier
# 安装vite
npm install --save-dev vite-plugin-eslint

在项目下新建.eslintrc.js、prettier.config.js文件 .eslintrc.js

module.exports = {
  root: true,
  env: {
   node: true,
  },
  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/standard', '@vue/prettier'], // "@vue/prettier"
  parserOptions: {
   parser: 'babel-eslint',
  },
  rules: {
   'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
   'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
   'camelcase': 'off',
   'prettier/prettier': [
     'warn',
     {
       // singleQuote: none,
       // semi: false,
       trailingComma: 'es5',
     },
   ],
  },
}

prettier.config.js

{
    "semi": true,
    "eslintIntegration": true,
    "singleQuote": true,
    "endOfLine": "lf",
    "tabWidth": 2,
    "trailingComma": "none",
    "bracketSpacing": true,
    "arrowParens": "avoid"
}

在vite.config.js中配置plugins

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入JSX支持
import vueJsx from '@vitejs/plugin-vue-jsx'
// UI按需加载
import ViteComponents, { AntDesignVueResolver } from "vite-plugin-components";
// eslint
import eslintPlugin from 'vite-plugin-eslint';

import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    // 别名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      comps: path.resolve(__dirname, 'src/components'),
      apis: path.resolve(__dirname, 'src/apis'),
      views: path.resolve(__dirname, 'src/views'),
      utils: path.resolve(__dirname, 'src/utils'),
      routes: path.resolve(__dirname, 'src/routes'),
      styles: path.resolve(__dirname, 'src/styles'),
      layouts: path.resolve(__dirname, 'src/layouts'),
      plugins: path.resolve(__dirname, 'src/plugins'),
    },
  },
  plugins: [
    vue(),
    vueJsx(),
    ViteComponents({
      // 组件库导入处理
      customComponentResolvers: [AntDesignVueResolver()],
    }),
    eslintPlugin({
      exclude: ['./node_modules/**'],
      cache: false
    })
  ],
  css: {
    preprocessorOptions: {
      // 引入公用的样式
      scss: {
        additionalData: `@import "@/styles/main.scss";`,
      },
      less: {
        modifyVars: {},
        javascriptEnabled: true,
      },
    },
  },

})

在package.json scripts配置自动修复命令

 "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"

vite2 + vue3项目

一、vite 项目初始化

1.1 初始化项目

1.2 vite2 配置

1.2.1 别名

1.2.2 JSX支持

1.3 整合vue-router 4.x 和 vuex 4.x

1.4 Sass/Scss 预处理器

1.5 Ant Design of Vue 按需加载

1.6 ConfigProvider 全局化配置

1.7 eslint、prettier配置

一、`vite` 项目初始化

1.3 整合`vue-router 4.x` 和 `vuex 4.x`

1.4 `Sass/Scss` 预处理器

1.6 `ConfigProvider` 全局化配置

1.7 `eslint`、`prettier`配置