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

你的名字 2023-01-23 07:58 20阅读 0赞

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

## 一. 环境搭建 ##

使用淘宝镜像的命令：

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

[vue3.x_vue3.x]: https://cuiyonghua.blog.csdn.net/article/details/118708626
[vue3.x_vue3.x 1]: https://cuiyonghua.blog.csdn.net/article/details/118708760
[vue3.x_vue3.x 2]: https://cuiyonghua.blog.csdn.net/article/details/118708813
[vue3.x_typescript]: https://cuiyonghua.blog.csdn.net/article/details/118708879
[vue3.x_vue3.x_46]: https://cuiyonghua.blog.csdn.net/article/details/118708914
[vue3.x_vue3.x 3]: https://cuiyonghua.blog.csdn.net/article/details/118708941