创建新的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
Getting Started with ESLint - ESLint - Pluggable JavaScript linter参考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_"开头
# 开发环境
VITE_APP_TITLE='baseVite'
VITE_BASE_URL= 'http://baidu.com'
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'),
assets: path.resolve(__dirname, 'src/assets'),
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)
5.Less
yarn add less less-loader --dev
vite.config.js 添加
return {
// ...
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
// 只配置全局通用参数
additionalData: `@import "${path.resolve(__dirname, 'src/assets/styles/params.less')}";`,
},
},
},
// ...
}
src/main.js
import 'assets/styles/index.less'
src/assets/styles/index.less
@import "params";
.button{
&-title{
// 测试
background: @red;
}
}
待更新...