前言

最近想开发很多小项目,所以需要搭建这一步骤,所以就给大家带来搭建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(项目介绍)

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