第二章【vue】基础（超详细）

Vue3企业级项目初始化

使用 Vite 构建 vue3 项目

npm create vite@latest (项目名称)

在根目录中创建vite项目

npm create vite .

运行时自动打开浏览器 配置端口 地址

在 vite.config.ts 文件中加入

export default defineConfig({plugins: [vue()],server: {open: true, //自动打开浏览器,// host:"" ,//配置地址port: 3001, //配置端口},});

vite.config.ts 情景配置

import {defineConfig} from 'vite'import vue from '@vitejs/plugin-vue'
export default defineConfig(可为对象或函数);//当传递函数时 该函数接收三个参数//1. mode : 项目运行模式export default defineConfig(({mode}) => {console.log(mode)return Object.assign(evnResolver[mode](), {plugins: [vue()]})})

vite.config.ts 开发 生产环境配置分离

1. 项目根目录新建config.js配置文件夹 用于存放开发和生产的配置文件
2. 该文件夹中新建dev.ts和prod.ts配置文件 dev.ts文件用于开发环境配置 prod.ts文件用于生产环境配置

   //dev.js/**** @type import('vite').UserConfig*/export const devConfig = {//----配置}

   prod.ts文件同理

   //开发环境部分配置import vue from '@vitejs/plugin-vue'import eslintPlugin from 'vite-plugin-eslint'import {fileURLToPath} from 'url'
   /**** @type import('vite').UserConfig*/export const devConfig = {plugins: [vue(), eslintPlugin()],resolve: {alias: {// '@': '/src''@': fileURLToPath(new URL('../src', import.meta.url))},//配置文件后缀自动检索extensions: ['.js', '.ts', '.jsx', '.tsx', '.json']},//配置路径别名server: {port: 3000,strictPort: true,open: true}}

3. 文件夹中新建index.ts配置文件 用于导出配置文件

4. 在vite.config.ts文件中加入配置

   import {defineConfig} from 'vite'import {evnResolver} from './config/index.js'import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/export default defineConfig(({mode}) =>