（1）cmd命令行搭建Vue项目并瘦身

前提条件

node.js 16+ 版本

配置环境变量

第一步文件管理器找到你要创建的位置

在里面输入cmd 回车键

第二步输入命令

npm create vue@latest

项目名称

Router

第三步依次执行以下命令

成功画面

第四步idea打开对应项目

项目结构如下

第五步删除无用的文件14个

.gitignore  .vscode/extension.json  README.en.md   README.md

src/assets/base.css   src/assets/main.css   src/components/HelloWorld.vue

src/components/WelcomeItem.vue     src/components/TheWelcome.vue

src/components/icons/lconCommunity.vue

src/components/icons/IconDocumentation.vue

src/components/icons/IconSupport.vue

src/components/icons/IconEcosystem.vue

src/components/icons/IconTooling.vue

删除后的目录

第六步删除view目录下的文件AboutView.vue HomeView.vue

在veiws目录下创建Home.vue

<template>

<div>

欢迎使用View

</div>

</template>

<script setup>

</script>

第七步修改路由router/index.js

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





const router = createRouter({

  history: createWebHistory(import.meta.env.BASE_URL),

  routes: [

    {

      name: 'home', component: () => import('../views/Home.vue')

    },



  ],

})



export default router

第八步精减App.vue文件

只保留

<template>



  <RouterView />

</template>

第九步将main.js的无用导包删除

import '.assets/main.css'

看看是否可以使用

打开package.json运行第一个

按住Ctrl左键点击

你做到了