前言

最近想开发很多小项目，所以需要搭建这一步骤，所以就给大家带来搭建vue项目，这里也可以搭建vue3，都是一样的步骤

一、搭建步骤

1、准备

npm install -g @vue/cli
vue -V

2、创建项目

vue create 【项目名】

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

image-1652631920280

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测试）

这个时候你就可以根据自己需求来制定自己的版本

image-1652632044276

到这里就代表现在好了

3、启动

npm run serve

4、访问

image-1652632146086

目录结构

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

好了，到这里就结束了，是不是很简单。但是距离开发还需要一些东西，那就是配置路由、插件等东西，下次将讲解配置路由