手把手教你搭建vue3项目

使用VUE3开发很久了，但一直没进行总结和记录，忙里偷闲整理搭建一套VUE3项目脚手架，正好记录一下，按照我的教程让你开启vue3之旅吧！

目录 创建项目组件推荐axios封装（页面loading）Vuex封装Router封装 - 搭建准备 Vscode/HBuilder等任何一种前端开发工具node.js&npm本地开发环境（大家如果是前端开发人员大部分都会有环境，如何安装就不说了，大家自行百度）安装vue-cli3（需要安装3.x以上版本）
npm install -g @vue/cli
vue -V
- 创建项目

vue create 【项目名】

默认安装vue2
默认安装vue3
自定义安装

【我们选择第三个自定义安装】

Choose Vue version（选择VUE版本）
Babel（JavaScript 编译器，可将代码转换为向后兼容）
TypeScript（编程语言，大型项目建议使用）
Progressive Web App (PWA) Support-APP使用
Router（路由）
Vuex（Vuex）
CSS Pre-processors（css预处理）
Linter / Formatter（代码风格/格式化）
Unit Testing（单元测试）
E2E Testing（e2e测试）

【（*号代表选中）根据自己项目需求空格选中，选中完回车确认】

【选择vue版本，选择3.x】

是否使用history router

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）

hash： 浏览器url址栏 中的 # 符号（如这个 URL：http://www.abc.com/#/hello，hash 的值为“ #/hello”），hash 不被包括在 HTTP 请求中（对后端完全没有影响），因此改变 hash 不会重新加载页面

history：利用了 HTML5 History Interface 中新增的 pushState( ) 和 replaceState( ) 方法（需要特定浏览器支持）。单页客户端应用，history mode 需要后台配置支持

【根据自己的需求选择，我这里选择yes】
【选择sass/scss就选择node-sass，因为之前使用dart-sass会有图标乱码问题】

ESLint套餐

【先选择第一个，后续我们在自己加。】

Lint on save 保存后检测
Lint and fix on commit commit时检测

【选择第一个】

babel和eslint配置位置

【选择第一个存放在专属文件里】

是否保存为默认配置（如果选择yes需要自己起个默认名）

【选择完就开始创建了】

【成功后就可以在自己的开发工具打开了】

-启动项目

目录结构

node_modules（npm 加载的项目依赖模块）public（公共资源）src（开发目录） assets（图片等文件）components（组件）router（路由）store（vuex）views（页面）App.vue（核心页）main.js（核心文件） .browserslistrc（这个配置能够分享目标浏览器和nodejs版本在不同的前端工具。这些工具能根据目标浏览器自动来进行配置）.eslintrc.js（ESlint配置文件）.gitignore（git配置文件）babel.config.js（babel配置文件）package-lock.json（依赖版本锁定）package.json（项目信息及依赖信息）README.md（项目介绍）

【打开终端执行npm run serve就可以启动项目了】

到这里基本项目就搭建完了，但很多地方还需要优化！
下节会为大家带来代码格式化，推荐npm组件等内容

喜欢就关注点赞一下吧，会尽快更新！！！