vue3项目创建

【一】vue-cli创建(不用了)

【1】步骤

vue create vue3_demo1

【2】配置npm 镜像站

npm config set registry https://registry.npmmirror.com

【3】查看镜像站

npm config get registry

【二】vite创建（推荐）

【1】简介

• 什么是vite？—— 新一代前端构建工具。
• 官网：https://cn.vitejs.dev/
• 优势如下：
  • 开发环境中，无需打包操作，可快速的冷启动。
  • 轻量快速的热重载（HMR）
  • 真正的按需编译，不再等待整个应用编译完成。
  • 传统构建 与 vite构建对比图

【2】创建工程

• 不指定名字创建

npm create vite@latest

• 指定名字创建

  • 创建项目方式一

  npm create vite@latest vue3_demo002
  

  • 创建项目方式二:指定名字

  cnpm create vite@latest vue3_demo002
  

  • 创建项目方式三

  cnpm create vite vue3_demo002
  

• 安装依赖

npm install 

• 运行项目

npm run dev

• 安装Vue Router

npm install vue-router@next

• 配置vue-router

import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  // 更多路由...
];

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

export default router;

• 在main.js中引入Vue Router

import { createApp } from 'vue'
import App from './App.vue'
import './style.css'
import router from './router'
const app = createApp(App)
app.use(router)
//app.use(router) 需放在app.mount('#app')前面
app.mount('#app')

• APP.vue 展示当前路由对应的组件

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>