1.vue-cli实现

版本要求：

1. node -v 不能低于v14+，推荐node v16+
2. npm -v 8.1.0
3. vue -V @vue/cli 4.5.15 //不能低4.5
   若vue -V 报错 则需安装vue脚本架 npm i -g @vue/cli

1. vue create 项目名称

手动选择

2 菜单选择

3. 选择3.x版本

4. 路由器是否使用历史记录模式？

5. 预编译器选择

6. ESlint标准

7. 保存时检验ESlint

8. 是否单独保存babel,eslint设置

9. 是否保存上面的设置

10. 起个炫酷的名字吧

2. vite创建

1. npm init vite — 需要安装以下软件包：创建vite 选择 y

如果网速慢，改一下npm镜像源
npm config set registry https://registry.npm.taobao.org

2. 项目名称

3. 选择框架

4. 是否使用ts

5. 选择变体，vue 或vue-ts

6. 安装router、配置router

• 安装依赖 yarn add vue-router
• 创建router/index.js 文件 创建view/index.vue 文件 内容先随便写下

import {
    createWebHashHistory,
    createRouter
} from "vue-router"
import Index from '../view/index.vue'


const routes = [
    {
        path: '/',
        component: Index
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes: routes
})


export default router

• main配置router 挂载上

import router from './router'
createApp(App).use(router)

• 最后App入口文件配置router-view即可
  

3. vue-create创建【官方推荐】

1. 创建项目 npm init vue@3

2. 项目名称

3. 是否添加TS (按需自主选择)

4. 是否JSX (按需自主选择)

5. 添加路由

6. 是否添加pinia状态管理工具，相当相于vue2的vuex

7. 是否安装单元测试 (按需自主选择)

8. 是否安装端到端测试 (按需自主选择)

9. 是否安装ESlint代码检查工具

10. 是否安装Prettier格式工具

创建成功