【前端】创建一个vue3+JavaScript项目流程

1、检查node和npm是否安装，查看版本：

node -v
npm -v

2、安装脚手架cli或vite

（1）cli

安装：npm install -g @vue/cli

检查是否安装成功：vue -v

使用cli创建项目：vue create my-project(项目名)---→然后可以选择vue3/2--→等待创建

切至项目：cd my-project

运行：npm run serve

（2）vite

方法一：

        安装：npm install -g create-vite-app、

        创建：create-vite-app my-project --template vue

        切至项目：cd my-project

        运行：npm run dev

方法二：

        初始化项目：npm init vite@latest

        创建vite项目：npm create vite@latest

        输入项目名--→选择框架vue---→选择语言JavaScript

        切至项目：cd my-project

        运行：npm run dev

3、目录主要结构：

Cli:

        my-project/
        ├── src/
        │   ├── main.js       # 项目入文件
        │   ├── App.vue       # 根组件
        │   └── component/   # 存放组件
        ├── package.json      # 项目依赖和脚本配置
        └── README.md         # 项目说明

vite:

        my-project/
        ├── src/
        │   ├── main.js       # 项目入文件
        │   ├── App.vue       # 根组件
        │   └── assets/   # 存放静态资源

        ├── public/           # 存放公共资源
        ├── package.json      # 项目依赖和脚本配置
        └── README.md         # 项目说明

        └── vite.config.js    # Vite配置文件

 4、App.vue开始写页面

 5、添加路由

安装：npm install vue-router@4

在src/main.js引入并使用：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

在src/router/index.js定义路由：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home }
  ]
})
export default router

6、 添加vuex状态管理

安装：npm install vuex@4

在src/store/index.js中创建：

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

在src/main.js引入并使用：

import store from './store'
app.use(store)

7、开发、调试 

8、构建生产环境(vite)

vite创建的项目，开发完后需要构建生产环境：npm run build

  构建完成后，会在dist目录下生成生产环境的文件。

9、配置axios请求

在src/utils里的axios.js或http.js配置axios，创建axios实例，并使用请求拦截器和响应拦截器 

10、封装接口

在src/api里