vite+vue3 1

这两天利用晚上的时间，操作了一把vite+vue3，现在把操作过程记录下来。

一、准备工作

首先，你需要把nodejs版本升级到12以上，官网：nodejs.org，中文站：http://nodejs.cn/，我直接下载16.14.2LTS版

然后，安装Visual Studio Code，官网：https://code.visualstudio.com/，为了更好的使用VSCode，根据自己的需要安装一系列插件

二、开始工作

1.vite

1.1.简要说明：vite是用来代替webpack的打包工具，原理是利用现代浏览器已经支持esmodule的import，vite通过拦截由import转变的http请求，做一些预编译，提升开发体验。

1.2.步骤过程：

      a).使用npm创建工程，命令：npm init @vitejs/app npm init vite。

      b).系统提示输入工程名称，假设名称为ViteVue。

      c).系统提示选择一个框架模板，通过上下箭头选择，这里当然选择vue。此处说明，vite不是专门为vue设计，它还支持react等其他框架模板。

      d).上述三步完成之后，基于vite的vue项目就创建完毕。

      e).进入工程目录，命令：cd vitevue

      f).安装依赖包，命令：npm install

1.3.查看效果：启动项目，命令：npm run dev

 

2.vue-router

2.1.简要说明：与vue3搭配的vue-router版本是4.x，vue-router4.x和vue-router3.x在使用的过程中有些差异，需要查看一下官方文档。

2.2.步骤过程：

      a).安装vue-router，命令：npm install vue-router@next --save  npm install vue-router@latest--save 或者npm install vue-router@4--save

      b).在src目录下创建router文件夹，在文件夹下创建index.js文件

      c).在index.js文件编写以下代码

import * as vueRouter from 'vue-router';

const routes = [
    { 
        path: "/", 
        redirect: "/home" 
    },
    { 
        path: '/home', 
        name: 'Home', 
        component: () => import("@/views/home/index.vue") 
    }
]

const router = vueRouter.createRouter({
    history: vueRouter.createWebHistory(),
    routes: routes
})

export default router

      d).修改src/views/home/index.vue文件内容为以下内容

<template>
  <HelloWorld :msg="msg"></HelloWorld>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue"

export default ({
  name: "Home",
  components: { HelloWorld },
  setup() {
    return {
      msg: "hello World",
    }
  }
})
</script>

     e).修改main.js文件，引入vue-router，代码如下

import * as Vue from 'vue'

import App from './App.vue'
import router from './router/index'

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

     f).将App.vue文件中的内容替换为以下内容

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <router-view />
</template>

<script>
export default {
  name: 'App',
  setup() {

  }
}
</script>

    g).修改vite.config.js文件，安装path模块，添加@别名

         1.安装命令：npm install --save-dev @types/node

         2.配置文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'   // 需安装此模块

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

2.3.查看效果：上述步骤过程执行完毕，运行命令：npm run dev，就看到效果了。 

 

3.vuex

3.1.简要说明：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。与vue3搭配的vuex版本是4.x。

3.2.步骤过程：

      a).安装vuex，命令：npm install vuex@4 --save

      b).在src下创建目录store文件夹，然后在其下创建index.js文件，内容如下

import Vuex from 'vuex'
import getters from './getters'

const store = Vuex.createStore({
    modules:{ },
    getters
})

export default store

      c).修改main.js文件，引入vuex，内容如下

import * as Vue from 'vue'

import App from './App.vue'
import store from './store/index'

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

      d).vuex4.x的使用和vuex3.x版本差别不大，这里就不写示例了。

3.3.查看效果：启动项目，命令：npm run dev

 

4.elementplus

4.1.简要说明：element团队给搭配vue3的elementUI起了个新名字elementPlus，这里只是记录使用它的过程，你也可以使用阿里蚂蚁团队的ant-design-vue等。

4.2.步骤过程：

      a).安装elementPlus，命令：npm install element-plus --save

      b).修改main.js文件，引入elementplus，代码如下

import * as Vue from 'vue'

import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const app=Vue.createApp(App)
app.use(ElementPlus,{locale:zhCn})
app.mount('#app')

      c).修改App.vue文件，编写示例，代码如下

<template>
  <img alt="Vue logo" src="./assets/logo.png" />

  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="审批人">
      <el-input v-model="formInline.user" placeholder="审批人"></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-select v-model="formInline.region" placeholder="活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
    };
  },

  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>

4.3.查看效果：启动项目，命令：npm run dev

 

5.axios

5.1.简要说明：使用axios主要要把跨域问题解决好。

5.2.步骤过程：

      a).安装axios，命令：npm install axios

      b).修改App.vue文件，内容如下

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    {{weatherinfo.city}}
    {{weatherinfo.WD}}
    {{weatherinfo.WS}}
  </div>
</template>

<script>
import { onMounted,reactive } from "vue";
import axios from "axios"

export default defineComponent({
  name: 'App',
  setup() {
    let weatherinfo = reactive({})

     onMounted(()=>{
       axios.get(`devApi/data/sk/101010100.html`).then(res=>{
        Object.assign( weatherinfo, res.data.weatherinfo)
        console.log('weatherinfo', weatherinfo)
      }).catch(err=>{
        console.log(err)
      })
    })

    return { weatherinfo}
  }
})
</script>

      c).由于涉及到跨域，修改vite.config.js文件配置代理

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'   // 需安装此模块
import cfgSetting from './src/configs/settings'


// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue()
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },
    server: {
        host: cfgSetting.spaAddress,
        port: cfgSetting.spaPort,
        strictPort: false,              //设为true时端口被占用则直接退出，不会尝试下一个可用端口
        cors: true,                     //为开发服务器配置CORS, 默认启用并允许任何源
        open: true,                     //服务启动时自动在浏览器中打开应用
        hmr: false,                     //禁用或配置 HMR 连接
        //传递给 chockidar 的文件系统监视器选项
        watch: {
          ignored:["!**/node_modules/your-package-name/**"]
         },
        proxy: {
          [cfgSetting.apiType]: {
                target: cfgSetting.svcAddress,   //实际请求地址
                changeOrigin: true,
                ws: true,
                rewrite: (path) => path.replace(cfgSetting.apiType, '')
          }
        },
        https: cfgSetting.svcIsHttps
    }
})

      d).settings.js文件内容见第三部分的第六小节。

5.3.查看效果：启动项目，命令：npm run dev

 

6.i18n

6.1.简要说明：一直以来我是不建议使用i18n配置国际化，原因很简单，语言和文化差异会使人的审美异同，众口难调，如果使用i18n配置国际化，就很难设计出一套具备个性化的方案，最后只能做出取舍，得出一套通用没有个性化的方案。

6.2.步骤过程：

      a).安装vue-i18n，命令：npm install vue-i18n

      b).在src目录下创建locales目录，并添加index.js，zh_cn.js，en_us.js三个文件

      c).index.js文件内容如下

import { createI18n } from 'vue-i18n' //引入vue-i18n组件
import zh_cn from './zh_cn'  //中文语言包
import en_us from './en_us'  //英文语言包
 
// 实例化I18n
const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: "zh_cn", // 初始化配置语言
    messages: {
        zh_cn,
        en_us
    }
})

export default i18n

      d).zh_cn.js文件内容如下

export default {
    message: {
        Home: '首页',
        About: '关于'
    }
}

      e).en_us.js文件内容如下

export default {
    message: {
        Home: 'Home',
        About: 'About'
    }
}

      f).修改main.js文件，引入vue-i18n，代码如下

import * as Vue from 'vue'

import App from './App.vue'
import i18n from './locales/index'

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

     g).修改App.vue文件，查看i18n效果

<template>
  <img alt="Vue logo" src="@/assets/logo.png" />
  <a href="javascript:void(0)" @click="change('zh_cn')">中文</a> --
  <a href="javascript:void(0)" @click="change('en_us')">English</a>
  <div>{{$t("message.Home")}}---{{$t("message.About")}}</div>

  <router-view />
</template>

<script>
import { useI18n } from 'vue-i18n'

export default ({
  name: "App",
  setup() {
    const { locale } = useI18n()
    function change(type) {
      locale.value = type;
    }
    return {
      change
    }
  }
})
</script>

6.3.查看效果：启动项目，命令：npm run dev

 

7.mock

7.1.简要说明：前后端分离之后，使用mock模拟产生后端提供的数据是非常有必要的，即即便后端一时无法提供服务，也不影响前端的正常编程工作。

7.2.步骤过程：

      a).安装mockjs，命令：npm install mockjs --save-dev

      b).安装vite-plugin-mock，命令：npm i vite-plugin-mock cross-env -D

      c).在 package.json 中设置环境变量

{
    "scripts": {
        "dev": "cross-env NODE_ENV=development vite",
        "build": "vite build",
        "serve": "vite preview"
    }
}

      d).在 vite.config.js 中添加 mockjs 插件

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import { viteMockServe } from "vite-plugin-mock"

export default defineConfig({
    plugins: [
        vue(),
        viteMockServe({
            supportTs: false     //如果使用typescript开发，则需要配置supportTs为true
        })
    ]
})

      e).在工程中根目录创建 mock 文件夹，建立getUsers.js在其中创建需要的数据接口

export default [
    {
        url: "/api/getUsers",
        method: "get",
        response: () => {
            return {
                code: 0,
                message: "ok",
                data: ["张三", "李四"],
            }
        }
    }
]

      f).修改App.vue文件，请求接口，显示数据

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div v-for="(item,index) in users">
    {{index+1}}-{{item}}
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import axios from "axios"

export default defineComponent({
  name: 'App',
  setup() {
    let users = ref([])

    onMounted(()=>{
      axios.get(`/api/getUsers`).then(res=>{
        users.value = res.data.data
        console.log('users', users)
      }).catch(err=>{
        console.log(err)
      })
    })

    return { users }
  }
})
</script>

7.3.查看效果：启动项目，命令：npm run dev

 

8.sass

8.1.简要说明：Sass是一个将脚本解析成CSS的脚本语言，即SassScript。 它扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。

8.2.步骤过程：

      a).安装sass，命令：npm i sass -D

      b).使用sass，语法：<style lang="scss"></style>

      c).特别说明：由于vite已经集成好了sass的相关loader，所以无需额外配置。

8.3.查看效果：启动项目，命令：npm run dev

 

9.gzip

9.1.简要说明：对打包后的文件进行压缩，在部署到Web服务器后，可以节省带宽资源，前提是Web服务器支持压缩。这里主要使用vite-plugin-compression插件实现，地址：https://github.com/anncwb/vite-plugin-compression

9.2.步骤过程：

      a).安装vite-plugin-compression插件，命令：npm i vite-plugin-compression -D

      b).修改vite.config.js文件，引入插件，代码如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteCompression from 'vite-plugin-compression'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteCompression({
      threshold: 10240,      //体积大于10kb压缩
      filter: /\.(js|mjs|json|css|html)$/i,
      algorithm: 'gzip',          //压缩算法，gzip|brotliCompress|deflate|deflateRaw
      disable: false,
      deleteOriginFile: false   //是否删除源文件
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

9.3.查看效果：启动项目，命令：npm run dev

 

10.copy

10.1.简要说明：在编程的过程中，有一些静态资源是不需要vite进行处理的，只需要简单拷贝到dist文件夹下即可，此时我们使用rollup-plugin-copy插件就可以实现。

10.2.步骤过程：

      a).安装rollup-plugin-copy，命令：npm install rollup-plugin-copy -D

      b).修改vite.config.js文件，引入插件，代码如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import copy from 'rollup-plugin-copy'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    copy({
      targets: [
        { src: 'src/static', dest: 'dist' }, //执行拷贝
      ],
      hook: 'writeBundle' // notice here
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

10.3.查看效果：启动项目，命令：npm run dev

 

 

三、配置信息

1.vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from "vite-plugin-mock"
import viteCompression from 'vite-plugin-compression'
import copy from 'rollup-plugin-copy'
import path from 'path'
import cfgSetting from './src/configs/settings'

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  publicDir: "public",      //静态资源服务的文件夹
  logLevel: "info",         //控制台输出的级别 info 、warn、error、silent
  clearScreen: true,         //设为false 可以避免 vite 清屏而错过在终端中打印某些关键信息
  build: {
    //浏览器兼容性  "esnext"|"modules"
    target: "modules",
    //指定输出路径
    outDir: "dist",
    //生成静态资源的存放路径
    assetsDir: "assets",
    //小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项
    assetsInlineLimit: 4096,
    //启用/禁用 CSS 代码拆分
    cssCodeSplit: true,
    //构建后是否生成 source map 文件
    sourcemap: false,
    //自定义底层的 Rollup 打包配置
    rollupOptions: {
      output: {
      }
    },
    //当设置为 true，构建后将会生成 manifest.json 文件
    manifest: false,
    /*
      设置为 false 可以禁用最小化混淆，或是用来指定使用哪种混淆器
      boolean | 'terser' | 'esbuild'
      terser 构建后文件体积更小
    */ 
    minify: 'terser',
    //传递给 Terser 的更多 minify 选项。
    terserOptions: {
      compress:{
        drop_console: true,
        drop_debugger: true
      }
    },
    //设置为 false 来禁用将构建后的文件写入磁盘
    write: true,
    //默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。
    emptyOutDir: true,
    //启用/禁用 brotli 压缩大小报告
    brotliSize: true,
    //chunk 大小警告的限制
    chunkSizeWarningLimit: 500
  },
  plugins: [
    vue(),
    viteMockServe({
      supportTs: false     //如果使用typescript开发，则需要配置supportTs为true
    }),
    viteCompression({
      threshold: 10240,      //体积大于10kb压缩
      filter: /\.(js|mjs|json|css|html)$/i,
      algorithm: 'gzip',          //压缩算法，gzip|brotliCompress|deflate|deflateRaw
      disable: false,
      deleteOriginFile: false   //是否删除源文件
    }),
    copy({
      targets: [
        { src: 'src/static', dest: 'dist' }, //执行拷贝
      ],
      hook: 'writeBundle' // notice here
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {
    host: cfgSetting.spaAddress,
    port: cfgSetting.spaPort,
    strictPort: false,              //设为true时端口被占用则直接退出，不会尝试下一个可用端口
    cors: true,                     //为开发服务器配置CORS, 默认启用并允许任何源
    open: true,                     //服务启动时自动在浏览器中打开应用
    hmr: false,                     //禁用或配置 HMR 连接
    //传递给 chockidar 的文件系统监视器选项
    watch: {
      ignored:["!**/node_modules/your-package-name/**"]
     },
    proxy: {
      [cfgSetting.apiType]: {
            target: cfgSetting.svcAddress,   //实际请求地址
            changeOrigin: true,
            ws: true,
            rewrite: (path) => path.replace(cfgSetting.apiType, '')
      }
    },
    https: cfgSetting.svcIsHttps
  }
})

2.vue-router/index.js

import * as vueRouter from 'vue-router';

const routes = [
    { 
        path: "/", 
        redirect: "/home" 
    },
    { 
        path: '/home', 
        name: 'Home', 
        component: () => import("@/views/home/index.vue") 
    }
]

const router = vueRouter.createRouter({
    history: vueRouter.createWebHistory(),
    routes: routes
})

export default router

3.vuex/index.js

import Vuex from 'vuex'
import getters from './getters'

const store = Vuex.createStore({
    modules:{ },
    getters
})

export default store

4.i18n/index.js

import { createI18n } from 'vue-i18n' //引入vue-i18n组件
import zh_cn from './zh_cn'  //中文语言包
import en_us from './en_us'  //英文语言包
 
// 实例化I18n
const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: "zh_cn", // 初始化配置语言
    messages: {
        zh_cn,
        en_us
    }
})

export default i18n

5.main.js

import * as Vue from 'vue'

import App from './App.vue'
import router from './router/index'
import store from './store/index'
import i18n from './locales/index'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const app=Vue.createApp(App)
app.use(store)
app.use(router)
app.use(i18n)
app.use(ElementPlus,{locale:zhCn})
app.mount('#app')

6.configs/settings.js

module.exports = {
    apiType:'/devApi',
    spaAddress:'127.0.0.1',
    spaPort: 9000,
    svcAddress:'http://www.weather.com.cn',
    svcIsHttps: false
}

 

四、其他信息

1.目录结构

 

 

2.兼容性

2.1.由于vite利用了浏览器导模块的能力，所以主流浏览器的最低版本如下：

           a).Chrome >=61

           b).Firefox >=60

           c).Safari >=11

           d).Edge >=16

      那些古老的浏览器（如IE）就不支持了。

2.2.针对兔民的怀旧情怀，官方也提供了低浏览器版本的解决方案，即使用插件@vitejs/plugin-legacy（https://github.com/vitejs/vite/tree/main/packages/plugin-legacy），使用它之后vite打包出来的程序就可以在低版本浏览器中运行。原理就是利用@babel/preset-env进行转换，自然打包效率就会大幅度降低，因此需要做取舍。

3.代码规范

为了使代码具备更好的可读性和可维护性，以及维护团队成员良好的协作效率，你可以在工程中配置代码规范格式管理约束，具体使用哪种工具和风格自我选择即可。

4.上述内容中完整的App.vue文件内容

<template>
  <img alt="Vue logo" src="@/assets/logo.png" />
  <a href="javascript:void(0)" @click="change('zh_cn')">中文</a> --
  <a href="javascript:void(0)" @click="change('en_us')">English</a>
  <div>{{$t("message.Home")}}---{{$t("message.About")}}</div>

  <div>
    {{weatherinfo.city}}
    {{weatherinfo.WD}}
    {{weatherinfo.WS}}
  </div>

  <div v-for="(item,index) in users">
    {{index+1}}-{{item}}
  </div>

  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="审批人">
      <el-input v-model="formInline.user" placeholder="审批人"></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-select v-model="formInline.region" placeholder="活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>

  <router-view />
</template>

<script>
import { useI18n } from 'vue-i18n'
import { onMounted, reactive, ref } from "vue";
import axios from "axios"

export default ({
  name: "App",
  setup() {
    const { locale } = useI18n()
    function change(type) {
      locale.value = type;
    }

    let weatherinfo = reactive({})
    onMounted(()=>{
      axios.get(`/devApi/data/sk/101010100.html`).then(res=>{
        Object.assign(weatherinfo, res.data.weatherinfo)
      }).catch(err=>{
        console.log(err)
      })
    })

    let users = ref([])
    onMounted(()=>{
      axios.get(`/api/getUsers`).then(res=>{
        users.value = res.data.data
        console.log('users', users)
      }).catch(err=>{
        console.log(err)
      })
    })

    return {
      change,
      weatherinfo,
      users
    }
  },
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      }
    }
  },
  methods: {
    onSubmit() {
      console.log("submit!")
    }
  }
})
</script>

 

五、参考信息

1.https://www.cnblogs.com/zsg88/p/15652011.html

2.https://juejin.cn/post/6989475484551610381

3.https://juejin.cn/post/6973288527802925092

4.https://juejin.cn/post/6946007023951544357