使用Vue3.0+vite初始化项目总结

前言

众所周知,vue-cil@2.0集成的模块化工具是webpack,也是企业用的比较热门、成熟的模块化管理工具,那么除了webpack,比较热门的模块化工具还有snowpack、vite。

weback跟snowpack的区别:

  1. 注入css方式不同(大同小异)
    他们都有loader处理器对css进行解析,但并不会直接生成单独的css文件(依附的是mini-css-extract-plugin),而是加载一个js模块,然后在模块中通过DOM中API将css文本作为style标签的内容插入页面中:
    等于在index.html生成一个动态节点Style:text / css
  2. 生成 js 资源(css、图片…)都会加proxy
    通过transformEsimports的方法调用,这个方法可以将js中import 模块路径进行转换,node modules替换为webmoduleswrapEsmProxyResponse 生成 Proxy模块方法,HMR: hot Module Replacement(热模块替换)
  3. HMR 代码放在assets/hmr.js, 其中一个是:webpack向页面加script标签来加载 snowpack 使用原生 dynamic import 来加载

vite跟snowpack的特点差不多,它是一个不需打包的构建工具,开发时使用 es module 导入代码,生产环境用 rollup 构建。也具有:

1. 冷服务启动,原生,不进行build
2. 开发热更新
3. 按需编译,不会刷新DOM

但区别体现在:

  • vite更适合vue3.0去搭配使用(不兼容vue2.0),在生态上会更加融合,但毕竟是较新的模块工具(从兼容性就看出了),所以坑和需要优化的地方较多,不推荐实际企业开发中使用
  • snowpack现在已出现了v2 和向前兼容的v1,在vue、react、preact、svelte上都可以应用

vite的安装

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

代码分析

关键变化是index.html中的入口文件导入方式

在这里插入图片描述
这样main.js中就可以使用ES6 Module方式组织代码
在这里插入图片描述
浏览器会自动加载这些导入,vite会启动一个本地服务器处理不同这些加载请求,对于相对地址的导入,要根据后缀名处理文件内容并返回,对于裸模块导入要修改它的路径为相对地址并再次请求处理。
在这里插入图片描述
再根据模块package.json中的入口文件选项获取要加载的文件。
在这里插入图片描述

资源分析

CSS文件导入

在我们程序中,除了全局样式大部分样式都是以形式存在于SFC中

CSS Module
在这里插入图片描述
在这里插入图片描述
JS中导入CSS Module:将css文件命名为*.module.css即可
在这里插入图片描述
css 预处理器
安装对应的预处理器就可以直接在vite项目中使用。

<style lang="scss">
/* use scss */
</style>

或者在JS中导入

import './style.scss'

PostCSS
*Vite自动对 .vue 文件和导入的.css 文件应用PostCSS配置,我们只需要安装必要的插件和添加 postcss.config.js 文件即可。

module.exports = {
  plugins: [
    require('autoprefixer'),
  ]
}

npm i postcss autoprefixer@8.1.4

资源URL处理

  • 引用静态资源
    我们可以在.vue 文件的template, style和纯.css文件中以相对和绝对路径方式引用静态资源。*(这个太爽了!!!)
<!-- 相对路径 -->
<img src="./assets/logo.png">
<!-- 绝对路径 -->
<img src="/src/assets/logo.png">
<style scoped>
#app {
  background-image: url('./assets/logo.png');
}
</style>
  • public目录
    public 目录下可以存放未在源码中引用的资源,它们会被留下且文件名不会有哈希处理。
    这些文件会被原封不动拷贝到发布目录的根目录下

    注意引用放置在 public 下的文件需要使用绝对路径,例如 public/icon.png 应该使用 /icon.png引用

typescript整合

vite可直接导入.ts 文件,在SFC中通过<script lang="ts">使用
例如:使用ts创建一个组件

<script lang="ts">
import { defineComponent } from 'vue'

interface Course {
  id: number;
  name: string;
}
  
export default defineComponent({
  setup() {
    const state = ref<Course[]>([]);
    setTimeout(() => {
      state.value.push({ id: 1, name: "全栈架构师" });
    }, 1000);
  },
});
</script>

ts版本指定,package.json

{
  "devDependencies": {
    "typescript": "^3.9.7"
  }
}

ts参考配置,tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "isolatedModules": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "experimentalDecorators": true,
    "lib": ["dom", "esnext"]
  },
  "exclude": ["node_modules", "dist"]
}

项目根目录创建vite.config.js,可以对vite项目进行深度配置。

代理(也是开发过程中比较关注的)

配置服务器代理,vite.config.js

export default {
  proxy: {
    '/api': {
      target: 'http://jsonplaceholder.typicode.com',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
}

使用

fetch("/api/users")
  .then(response => response.json())
  .then(json => console.log(json));

数据mock

npm i mockjs -S
npm i vite-plugin-mock cross-env -D

引入插件,vite.config.js

plugins: [
  createMockServer({
    // close support .ts file
    supportTs: false,
  }),
],

设置环境变量,package.json

"dev": "cross-env NODE_ENV=development vite"

创建mock文件,mock/test.js

export default [
  {
    url: "/api/users",
    method: "get",
    response: req => {
      return {
        code: 0,
        data: [
          {
            name: "tom",
          },
          {
            name: "jerry",
          },
        ],
      };
    },
  },
  {
    url: "/api/post",
    method: "post",
    timeout: 2000,
    response: {
      code: 0,
      data: {
        name: "vben",
      },
    },
  },
];

模式和环境变量

使用模式做多环境配置,vite serve时模式默认是development,vite build时是production
创建配置文件.env.development

VITE_TOKEN=this is token

代码读取

import.meta.env.VITE_TOKEN

打包和部署

  • 打包

    使用npm run build执行打包

  • 部署

手动上传dist中的内容到服务器,再配置好nginx当然可以,但是也可以用自动化处理,避免前面这些繁琐的操作。可以利用github actions实现CI/CD过程,这里就不详细说了,大家可以自行去找有关资料和尝试实践一下,正所谓好记性不如烂笔头嘛。

有关文献

snowpack原理:https://www.ershicimi.com/p/6fa366feabbf503957831bcf8977f6bf
认识snowpack:https://zhuanlan.zhihu.com/p/108222057

欢迎关注我的博客: https://blog.csdn.net/weixin_42323607

github地址: https://github.com/NurTuam

多多支持!本人会持续更新哒 ❤️

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值