手把手教你搭建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组件等内容

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