三个小时vue3.x从零到实战（后）（vue3.x配套工具及项目化构建）

Posted 2021-08-11 cui_yonghua

目录：

1. 三个小时vue3.x从零到实战（前）（vue3.x基础）
2. 三个小时vue3.x从零到实战（中）（vue3.x高级语法）
3. 三个小时vue3.x从零到实战（后）（vue3.x配套工具及项目化构建）
4. 三个小时vue3.x从零到实战（typescript的搭建、使用及资料）
5. 三个小时vue3.x从零到实战（vue3.x经典案例46个）
6. 三个小时vue3.x从零到实战（vue3.x面试总结）

一. 环境搭建

使用淘宝镜像的命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

cnpm install [name]

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

# 全局安装 vue-cli
$ cnpm install -g @vue/cli
# 安装完后查看版本
$ vue --version
@vue/cli 4.5.13

二. vue脚手架: vue-cli构建工具

## 创建项目
vue create my-project

用来创建vue项目的工具包
创建项目:
    npm install -g vue-cli
    vue init webpack VueDemo
开发环境运行:
    cd VueDemo
    npm install
    npm run dev
生产环境打包发布
    npm run build
    npm install -g serve
    serve dist
    http://localhost:5000

三. vuex语法

github站点: https://github.com/vuejs/vuex
在线文档: https://vuex.vuejs.org/zh-cn/
简单来说: 对应用中组件的状态进行集中式的管理(读/写)

下载: npm install vuex --save

四. eslint

用来做项目编码规范检查的工具
基本原理: 定义了很多规则, 检查项目的代码一旦发现违背了某个规则就输出相应的提示信息
有相应的配置, 可定制检查

五. 使用vite构建

vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，

它做到了本地快速开发启动, 在生产环境下基于 Rollup 打包。

快速的冷启动，不需要等待打包操作；
即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。

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