创建项目 & 启动

方式 npm

全局安装脚手架工具包

npm i -g @vue/cli

项目初始化

vue create + 项目名称

启动

使用yarn包管理工具安装依赖包，执行 yarn dev 启动项目

工作目录

编写

在src下自己新建 pages router util components 等文件目录

入口文件(src/main.js)

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

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

路由文件（src/router/index.js）

tips: component: () => import('../pages/Home/index.vue')这个写法就是组件懒加载

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

// 创建路由实例
const router = createRouter({
  history: createWebHistory(), // 使用hash模式可以用createWebHashHistory
  routes: [
    { path: '/', component: () => import('../pages/Home/index.vue') },
    { path: '/home', component: () => import('../pages/Home/index.vue') },
    { path: '/about', component: () => import('../pages/About/index.vue') },
    // 更多的路由...
  ],
});
 
export default router;