VUE3+Vite+yarn-CFANZ编程社区

创建新的vue项目

# 安装Vue
npm install vue@next
# 安装vue/cli
yarn global add @vue/cli
# 创建项目
yarn create vite baseVite --template vue
# 进入项目目录
cd baseVite/
# 初始化并安装依赖
yarn
# 运行
yarn dev

开始配置

1.安装 eslint

# 安装eslint
yarn add eslint --dev
# 创建配置文件
yarn create @eslint/config

.eslintrc.js 可以根据自己的情况自定义

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    'vue/setup-compiler-macros': true,
  },
  extends: [
    // 'plugin:vue/base', // 启用正确 ESLint 解析的设置和规则
    // 'plugin:vue/essential', // ... base，以及防止错误或意外行为的规则
    // 'plugin:vue/vue3-strongly-recommended', // ... 上面，加上大大提高代码可读性和/或开发体验的规则
    'plugin:vue/vue3-recommended', // ... 上面，加上强制执行主观社区默认值的规则，以确保一致性
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [
    'vue', 'html',
  ],
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.vue'],
      },
      alias: {
        map: [
          ['@', './src'],
        ],
        extensions: ['.vue', '.ts', '.js', '.jsx', '.tsx'], // 可忽略的后缀名
      },
    },
  },
  rules: {
    // 0:off 1:warn 2:error
    semi: [2, 'never'], // 不使用分号
    'max-len': [1, { code: 120 }], // 此处为具体添加代码
    camelcase: [2, { properties: 'always' }], // 为属性强制执行驼峰命名
    'eol-last': 2, // 强制文件以换行符结束（LF）
    'import/no-extraneous-dependencies': [2, { devDependencies: true }], // 进行模块引入的检查
    'import/extensions': [0, 'always', {
      js: 'never', ts: 'never', tsx: 'never', vue: 'never',
    }],
    'no-param-reassign': [ // 禁止给参数重新赋值
      2,
      {
        props: true,
        ignorePropertyModificationsFor: [
          'e', // for e.returnvalue
          'ctx', // for Koa routing
          'req', // for Express requests
          'request', // for Express requests
          'res', // for Express responses
          'response', // for Express responses
          'state', // for vuex state
        ],
      },
    ],
  },
}

2. 配置.env (如果不需要多环境可忽略)

新建三个文件 .env .env.test .env.prod 文件中必须使用"VITE_"开头

package.json中 scripts 其中的 --mode xxx选择模块

{
  //...
  "scripts": {
    "dev": "vite --mode dev",
    "build": "vite build --mode test",
    "build:test": "vite build --mode test", 
    "build:prod": "vite build --mode prod",
    "preview": "vite preview"
  },
  //...
}

vite.config.js 文件修改为

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

// https://vitejs.dev/config/
export default defineConfig((command, mode) => {
  loadEnv(mode, process.cwd())

  return {
    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        '@': path.resolve(__dirname, 'src'),
        components: path.resolve(__dirname, 'src/components'),
        styles: path.resolve(__dirname, 'src/styles'),
        api: path.resolve(__dirname, 'src/api'),
        plugins: path.resolve(__dirname, 'src/plugins'),
        page: path.resolve(__dirname, 'src/page'),
        // 待解决
        utils: path.resolve(__dirname, 'src/utils'),
        layouts: path.resolve(__dirname, 'src/layouts'),
      },
    },
    plugins: [vue()],
  }
})

使用方式

import.meta.env.VITE_APP_TITLE

3.安装路由

yarn add vue-router

App.vue

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

main.js

import router from './router'

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

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import routerPage from './page'

// 开启历史模式
const routerHistory = createWebHistory()

const router = createRouter({
  history: routerHistory,
  routes: [...routerPage],
})

export default router

src/router/page.js

const home = [
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/home',
    component: () => import('@/components/HelloWorld'),
  },
]

export default home

4. 状态管理---安装VUEX

yarn add vuex@next --save

src/store/index.js

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      // todo
      count: 0,
    }
  },
  mutations: {
    // todo
    increment(state) {
      state.count += 1
    },
  },
})

export default store

main.js

import store from './store' // vuex


app.use(store)

待更新...