【创建vue项目的三种方式】

原创已于 2023-09-26 11:25:43 修改 · 8k 阅读

50 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #npm #typescript

于 2022-06-06 19:44:27 首次发布

本文详细介绍了使用Vue CLI创建项目的基本步骤，包括版本要求、项目初始化、路由设置、Vite构建方式，以及选择TS、路由管理工具等内容，帮助开发者高效上手新项目。

1.vue-cli实现

版本要求：

node -v 不能低于v14+，推荐node v16+
npm -v 8.1.0
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格式工具

在这里插入图片描述
创建成功