第二章【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