一. Vue CLI安装和使用
1.1 安装
- 全局安装,任何时候都可以通过
vue
的命令来创建项目
npm install @vue/cli -g
1.2 升级
- 如果是旧版本,可通过该命令升级
npm update @vue/cli -g
1.3 创建
vue create 项目的名称
1.4 配置
- 空格可以控制是否选择
Choose Vue version 是否选择 vue 版本,目前默认版本 vue2
Babel 是否选择 babel(例如: es6 转换 es5)
TypeScript 是否使用 TypeScript
Progressive Web App (PWA) Support 项目是否支持 PWA
Router 是否默认添加 router 路由
Vuex 是否默认添加 Vuex 状态管理
CSS Pre-processors 是否选择 CSS 预处理器
Linter / Formatter 是否选择 ESLint 对代码进行格式化限制
Unit Testing 是否添加单元测试
E2E Testing 是否添加 E2E 测试
- 选择
vue
版本
2.x
3.x
- 配置信息文件储放位置
> In dedicated config files 存放独立的文件中
In package.json 存放package.json
(全都存放到一个文件中,会让文件变得臃肿,推荐第一项)
二. Vite
官方定位:下一代前端开发与构建工具
随着项目越来越大,需要处理的
JavaScript
呈指数级增长,模块越来越多;构建工具需要很长时间才能开启服务器,HMR也需要几秒钟才能在浏览器反映出来;Vite
是一种新型前端构建工具,能够显著提升前端开发体验
主要由两部分组成
- 一个开发服务器,它基于原生ES模块提供了丰富的内建功能,HMR的速度非常快速;
- 一套构建指令,它使用rollup打开我们的代码,并且它是预配置的,可以输出生成环境的优化过的静态资源;
2.1 安装
Vite要求Node版本是大于12版本的
npm install vite –g # 全局安装
npm install vite –D # 局部安装
2.2 使用
- 启动
npx vite
- css
默认支持 css 不需要额外配置
- less
npm install less -D
- vue
Vue 3 单文件组件支持:@vitejs/plugin-vue
Vue 3 JSX 支持:@vitejs/plugin-vue-jsx
Vue 2 支持:underfin/vite-plugin-vue2
- 安装支持vue的插件
npm install @vitejs/plugin-vue -D
- vite.config.js 配置插件
import vue from '@vitejs/plugin-vue'
module.exports = {
plugins: [
vue()
]
}
2.3 打包
npx vite build
2.4 开启本地服务来预览打包后的效果
npx vite preview
2.5 脚手架
- 安装
npm install @vitejs/create-app -g
- 使用
create-app