9_vite自动构建工具

一、项目痛点

• 我不会nodejs，无法自己做代理服务器
• 导入js文件的时候，还要写后缀
• 导入node_modules里面的文件的时候，居然要写具体的路径
• 我做的项目修改了代码以后，要自己刷新
• 项目最后写完以后要交给后端，后端去部署上线，代码要压缩
• 后期项目可能要用ts，可能要用sass，浏览器不能识别，我要手动编译再预览
• 文件频繁移动位置，引入的路径也要修改
• …

二、vite 自动构建工具

• 就是为了解决上面的痛点
• 官网:https://vitejs.cn/
• node v14.8+ v16+
• vite下载vue项目模板

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+
npm create vite@latest my-vue-app -- --template vue

三、常用命令

1.npm install下载

2.npm run dev启动服务器

在开发环境启动调试代码服务器

• npm run dev
• 会启动一个node服务器，不用自己写代码来开启服务器，模拟后端服务器效果

3.npm run build打包生产

• 打包压缩用于生产环境的代码
• npm run build
• 打包好以后，根目录会多一个dist目录，需要交给后端，后端服务器部署才能看到效果
• 我们可以用node服务器测试效果

const express = require('express');
const app = express();

app.use(express.static('./public'))
app.listen(3001)

四、vue项目模板结构

• .vscode: 编辑器配置
• node_modules:依赖包
• public:vite开启的web服务器的静态资源目录
  • http://localhost:5173/
• src: 我们写源代码的位置
• .gitignore: git管理忽略文件
• index.html: 静态页面
  • 挂载 #app 元素
  • js的入口文件: src/main.js
• package.json: 项目信息
• package-lock.json: 版本锁定
• README.md: 说明文件，你可以自己写一些项目运行说明
• vite.config.js : vite的配置文件

五、项目中使用vuex

1.安装npm i vuex -s

npm install vuex -S

2.建src\store\index.js

src里面创建 store 文件夹，里面创建index.js

import {createStore} from 'vuex'

export default createStore({
  state(){
    return {   
      // 所有组件可以共享的状态，是响应式的
      tasks:[
        {name:'吃饭',completed:true,id:1},
        {name:'睡觉',completed:false,id:2},
        {name:'打小报告',completed:false,id:3},
        {name:'写代码',completed:true,id:4},
      ]
    }
  },
  getters:{
    count(state){
      // return的数据就是使用count获取的数据
      return state.tasks.filter(item=>!item.completed).length;
    }
  },
  mutations:{
    // 里面的方法要求是同步的方法
    addTask(state,payload){
      state.tasks.push(payload)
    }
  }
})

3.main.js导入

// 现在导入node_modules里面的包只要写包名就可以了
import { createApp } from 'vue'
// 导入store,如果导入的是一个文件夹，其实导入的是这个文件夹里面的index.js
// 如果导入的是js文件，后缀名.js可以省略
import store from './store'

import App from './App.vue'

// 使用插件vuex
createApp(App).use(store).mount('#app')

六、<script setup>语法糖

• 单文件组件setup语法糖
• 启动单文件组件setup语法糖: <script setup></script>
• 在单文件组件setup顶层定义的变量，无需return就可以在template中使用
• 在单文件组件setup顶层导入的组件，无需注册，就可以在template中使用

七、vite常用配置

• src路径的别名

import path from 'path'
// 在配置中添加下面内容
{
  resolve:{
    alias:{
      '@':path.resolve(__dirname,'src')
    }
  }
}

• sass: css的预编译语言
  • vite预先配置好了css的预编译语言: sass,less
  • 我使用sass，sass有两种格式: sass,scss，我使用scss格式
  • 我只需要下载sass编译包就可以了:npm install sass -D
    • -D表示依赖只是开发时候需要
    • 记录在package.json的devDependencies里面
  • 然后在单文件组件的style里面添加lang='scss’启用

body{
  color:red;
}
h3{
  font-size:100px;
}

body{
  color:red;
  h3{
    font-size:100px;
  }
}

body
  color:red;
  h3
    font-size:100px;

• 服务器代理配置
  • 测试配置是否成功
  • 安装axios: npm install axios -S
  • 把其他资料里面的utils和apis复制到src中（注意修改其中的路径）
    • env:'development'

// vite.config.js
// 在配置里面添加
{
  server:{
    proxy:{
      // 字符串
      // '/admin':'http://121.89.205.189:3001/',
      // 对象语法
      '/admin':{
        target:'http://121.89.205.189:3001/',
        changeOrigin:true
      }
    }
  }
}

八、环境文件

• 项目根目录创建
  • .env.development 针对开发模式（npm run dev）
  • .env.production 针对生产模式（npm run build）
• 书写VITE_BASE_URL变量

# .env.development
VITE_BASE_URL=/admin

# .env.production
VITE_BASE_URL=http://121.89.205.189:3001/admin

• 获取这个变量值: import.meta.env.VITE_BASE_URL
  • 只有VITE_开头定义的变量会被暴露
• 测试：修改 utils/request.js

// 根据环境变量确定baseURL
// let baseURL = '';
// let env = 'development'; // development 开发(dev)  production 生产(prod)
// switch(env){
//   case 'development': baseURL = '/admin';break;
//   case 'production': baseURL = 'http://121.89.205.189:3001/admin';break;
// }

// 根据环境变量和模式(development,production)确定
let baseURL = import.meta.env.VITE_BASE_URL

九、element-plus

• 安装

npm install element-plus -S
npm install @element-plus/icons-vue -S

• 使用

全局导入: 把所有组件和所有组件样式都导入 - 不推荐

// main.js

// 注册所有element-plus组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

// 注册所有图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

按需导入: 使用插件自动导入你使用的组件 - 推荐
+ 下载按需导入插件:npm install -D unplugin-vue-components unplugin-auto-import
+ 在vite.config.js添加配置按需要导入组件

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    })
  ],
})

手动导入需要的图标

• 导入:import 图标名 from ‘@element-plus/icons-vue’
• 注册图标组件: {components:{图标名:图标名}}