手把手教你搭建vue3项目

黄壮Z

已于 2024-03-12 12:02:12 修改

阅读量5w

点赞数 86

分类专栏： VUE3搭建文章标签： vue.js 前端 javascript npm 前端框架

于 2022-03-02 15:25:19 首次发布

本文链接：https://blog.csdn.net/weixin_43618130/article/details/123226540

版权

VUE3搭建专栏收录该内容

7 篇文章 8 订阅

订阅专栏

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

- 搭建准备

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（项目介绍）