vite+vue3+ts 手把手教你创建一个vue3项目

1、安装vite

vite 官网：https://cn.vitejs.dev/

1.2、安装 vite 构建工具：

$ npm install -g create-vite-app

1.3、Vite 创建 vue3 项目

create-vite-app vue3-demo 

1.4、安装 vue-router

安装 vue-router 工具，首先命令安装最新版本：

npm install vue-router@4.0.3 
安装完成，
    1）、在 src 文件夹下创建 router 文件夹，router 文件夹下创建 index.js 文件。
    2）、在 src 文件夹下继续创建 views 文件夹，views 文件夹下创建 About.vue 和 Home.vue 文件，然后在里面随便写几个标签文字之类的编写一点静态页面内容。
    3）、在 router 文件夹下的 index.js 文件中写入下面代码：

import { createRouter, createWebHistory } from 'vue-router'

// 开启历史模式
// vue2中使用 mode: history 实现
const routerHistory = createWebHistory();

const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/',
            redirect: '/home'
        },
        {
            path: '/home',
            component: () => import('../views/Home.vue')
        },
        {
            path: '/about',
            component: () => import('../views/About.vue')
        }
    ]
})

export default router 

    4）、在 App.vue 中修改这一部分：

<template>
  <div class="nav-btn">
    <router-link to='/'> Home</router-link>
    <router-link to='/about'>About </router-link>
  </div>
  <router-view></router-view>
</template> 

    4）、最后在全局 main.js 引入一下 router。

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

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

1.5、安装 less 以及 less-loader

npm install less less-loader --save 

1.6、Element Plus 组件库安装

npm install element-plus 

安装完成，在 main.js 中引入。

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

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

$ npm init vite@latest
√ Project name: ... vue-el-admin
√ Select a framework: » Vue
√ Select a variant: » TypeScript

Scaffolding project in D:\vueProject\vue-el-admin...

Done. Now run:

  cd vue-el-admin
  npm install
  npm run dev