搭建Vue项目

• 步骤：以vue2为案例，vue2搭建项目是以js为底层代码；vue3是以ts为底层代码

1.安装node.js

下载node.js,安装时直接下一步，不需要任何操作；建议安装到默认盘，避免后续配置环境(在命令符里输入node -v可以判断是否安装过)

2.安装vue脚手架

使用cmd打开终端安装脚手架

//安装脚手架到全局(安装一次以后都可以用，在命令符里输入vue -V可以判断是否安装过）
npm i @vue/cli -g

3.创建项目

使用cmd打开终端，找到想存入项目的路径创建项目

//创建项目
vue create 项目名称(建议使用字母)

4.设置预约设置

使用上下键控制选择，选取最后一个

5.选择需要的预约设置

有的会有choose Vue version(是否选取版本)选项，选取是

6.选择vue版本，这里选vue2

7.选取路由模式

Y：使用历史记录模式当路由
n：使用hash模式当路由
两种路由都可以，建议选n

8.选取CSS预设，选择Less

9.选取语法规则(是否为严格模式)

ESLint with error prevention only是错误时预防
ESLint + Standard config 是标准规格
选哪个都可以（无要求建议选第一个）

10.检查节点是否报错

Lint on save 编写完，保存时检查
Lint and fix on commit git提交时检查

11.存储插件配置位置：单独放在不同文件中

12.是否保存预设到将来的项目里：Y

13.给保存的预设取个：选择N时不需要起名，选择y或n都可

vue3搭建项目类似

1.查看vue版本：vue -V
在安装vue3脚手架时，要把vue2的脚手架先卸载（npm uninstall vue-cli -g全局卸载）
2.安装最新脚手架：npm i @vue/cli -g
3.创建项目
1.创建项目：vue create 项目名
2.选择手动选择：Manually select features
3.选择Choose…,Babel,Router,VueX,CSS…,linter
4.选v3
5.选y
6.选择Less
7.选ESLint with error prevention only
8.Lint on save
9.In dedicated config files
10.N
11.启动项目：npm run serve

---

• 创建项目后删除默认配置

1.清空src/views/App.vue中默认内容

<template>
  <div>保留基本框架</div>
</template>

<script>
export default {}
</script>

<style scoped>
</style>

2.删除默认生成的文件

• components/HelloWorld.vue
• views/Home.vue
• views/About.vue

3.修改路由配置,只留基础框架

• src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [ ]
const router = new VueRouter({
  routes
})
export default router

4.新增文件夹，在src下创建目录

• /api/index.js >>存储请求函数模块
• /styles >> 样式文件模块
• /utils >> 工具函数模块