一、Vue CLI脚手架
1. 安装和使用
1.1 系统全局安装
npm install @vue/cli -g
1.2 升级Vue CLI
如果是比较旧的版本，可以通过下面的命令来升级
npm update @vue/cli -g
1.3 创建项目
通过 vue 的命令来创建项目
vue create '项目的名称'
2. 项目创建过程
通过运行上述vue create '项目名称'命令后，会展示如图的配置选择：图源自 codewhy老师。
二、Vite
1.Vite介绍
Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。
它主要由两部分组成：
- 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
- 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
- Vite官网：https://cn.vitejs.dev/
# 启动 vite 服务
vite
# 打包
vite build
# 预览打包后的index.html
vite preview
1.1 用法
Vite 官网上可直接借助vite工具直接生成相应框架的项目、例如：Vue、React等。
npm create vite@latest
yarn create vite
然后按照提示操作即可！
2. Vite 打包基本使用
不使用官方的vite脚手架构建vite项目。从零开始创建 vite项目
2.1 安装
# 为项目局部安装 vite
npm i vite -D
# 为本机全局安装 vite
npm i vite -g
2.2 目录结构
├── mode_modules
├── src
| ├── css
| | ├── theme.css
| ├── js
| | ├── math.js
| ├── main.js
├── index.html
├── package.json
2.2.1 文件内容
-
theme.cssbody { background-color: paleturquoise; } .title { font-size: 24px; color: rebeccapurple; background-color: palegreen; padding: 10px; } -
math.jsconsole.log('math.js'); export function sum(num1, num2) { return num1 + num2; } export function mulity(num1, num2) { return num1 * num2; } -
main.js// 引入 ESmodule模块JS // import { sum, mulity } from './js/math.js'; import { sum, mulity } from './js/math'; // 使用vite后可不加js后缀，因为构建工具自动添加 // 引入 css 样式 import './css/theme.css'; const H2Element = document.createElement('h2'); H2Element.className = 'title'; H2Element.innerHTML = '你好，陈平安'; document.body.appendChild(H2Element); console.log(sum(1, 8)); console.log(mulity(1, 8)); console.log('hello,world'); -
index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="module" src="./src/mian.js"></script> </body> </html>
2.3 运行
- 在该项目中局部安装 vite
npm i vite -D
- 在终端命令行中运行：
# 执行本地的 vite
npx vite
通过Ctrl+鼠标左键就可进入 vite 创建的本地服务。
- html 展示
这样我们使用 ESmodule 引入的JS 和 通过模块引入的 css 都能正常加载。（相比于 webpack，vite自动帮我们处理了 css 样式）
3. 其他资源的打包
3.1 使用 less
3.1.1 新建 style.less
.title {
text-decoration: underline;
}
3.1.2 引入
// main.js
// 引入 less 样式
import './css/style.less';
当在 main.js 中直接引入.less 文件时，vite 就会报错：
提示你 less 依赖未找到，是否安装它。所以解决方案就是下载less依赖
npm i less -D
安装完后，直接在main.js中 Ctrl+S就可重新更新运行。
3.2 postcss的转换
postcss 为 CSS 规则添加特定厂商的前缀。通过 Autoprefixer 插件自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。
Vite 能直接支持postcss的转换，配置 postcss.config.js 的配置文件即可
3.2.1 安装
npm install postcss postcss-preset-env -D
3.2.2 配置
项目根目录下新建postcss.config.js
module.exports = {
plugins: [
// 使用 postcss预设
require('postcss-preset-env')
]
};
3.2.3 添加样式
在theme.css中添加
body {
background-color: paleturquoise;
}
.title {
font-size: 24px;
color: rebeccapurple;
background-color: palegreen;
padding: 10px;
/* 添加如下样式 */
user-select: none;
}
因为更改了相应的配置文件，重新需要重新运行 npx vite
随后在浏览器中就可看到postcss自动添加的浏览器前缀：
3.3 对TypeScript的支持
vite 默认就支持对 .ts 文件。
-
src/ts/log.tsexport function log(msg) { return `${new Date().toLocaleString()}--${msg}`; } -
mian.js// 引入 ts 文件 import { log } from './ts/log'; console.log(log('使用TS文件')); -
浏览器可正常打印出数据。证明默认支持ts文件
3.4 vue文件
Vite 为 Vue 提供第一优先级支持：
- Vue 3 单文件组件支持：@vitejs/plugin-vue
- Vue 3 JSX 支持：@vitejs/plugin-vue-jsx
- Vue 2.7 支持：vitejs/vite-plugin-vue2
- Vue <2.7 的支持：underfin/vite-plugin-vue2
3.4.1 在 main.js 中引入vue文件
App.vue
<template>
<div>
<h2>在Vite中加载Vue文件</h2>
<h2>{{ msg }}</h2>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
msg: 'App.vue'
};
}
};
</script>
<style>
h2 {
color: aliceblue;
}
</style>
main.js
// 引入Vue
// 下载vue依赖 npm i vue -D
import { createApp } from 'vue';
import App from './vue/App.vue';
// vue 代码
createApp(App).mount('#app');
npx vite运行：
默认不支持对vue文件的解析，需下载相应的插件@vitejs/plugin-vue
3.4.2 安装插件
npm i @vitejs/plugin-vue -D
3.4.3 配置
项目根目录创建vite.config.js
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [
// 添加对vue文件的支持
vue()
]
});