vue3搭建项目的两种方式

Vue3 创建项目有两种方式使用vite和@vue/cli

使用vite搭建

// 1. 全局安装
npm install -g create-vite-app

// 2. 新建项目

create-vite-app test-vite

// 3.进入目录
cd test-vite

// 4. 安装依赖
npm install

// 5 . 运行
npm run dev

注：可自行创建vite配置文件 vite.config.js

使用@vue/cli搭建

使用cli版本需要高于4.5.x

// 1. 全局安装
npm install -g @vue/cli

// 升级cli
npm update -g @vue/cli

//查看本机cli版本
vue --version

// 2. 新建项目

 vue create record-project-v3

3. 选择 vue3

image.png

4. 进入项目直接运行即可

使用vite 安装的是基础版本， 不带vue-router、vuex、scss等。 以下是添加vue-router

5. 安装 vue-router

npm install vue-router@next -S

// 在src文件夹下，建立router文件夹，建立index.js文件

import { createRouter, createWebHistory } from 'vue-router';
const routes = [
  {
    path: '/',
    name: 'index',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/attrs',
    name: 'attr',
    component: () => import('../views/attrs.vue')
  }
]
export default createRouter({
  history: createWebHistory(),
  routes
})

6. 修改 app.vue 和main.js

// app.vue
<template>
 <router-view></router-view>
</template>

// main.js

import { createApp } from 'vue'
import Router from './router'
import App from './App.vue'
import './index.css'
createApp(App).use(Router).mount('#app')

7. 整体目录结构

   
   image.png

就这样一个简单的模板就好了~