Vue3项目创建与Vue3项目中Router,Element Plus,Element Plus icon的引用

一、本地创建Vue3项目
注：vue项目的本地创建需要Node.js环境(npm包或者类似的cnpm等)。检查环境可以在cmd中输入：node -v与npm -v

环境的安装可以参考
[https://www.runoob.com/nodejs/nodejs-install-setup.html](菜鸟教程Node.js 安装配置)
1. 在需要创建Vue项目的文件夹中打开cmd，然后输入：

npm init vue@latest

命令台将会询问项目初始化的相关问题，例如项目名称等，如图所示：

看得懂可以根据需要自行选择功能，不懂也可以跟我一样，填个项目名称，然后一路enter过去。(注：这里选择的功能会自动加载在项目中，后续无需重复引入)
2. 项目初始化完成后会有命令提示，按照提示相继输入命令即可，例如：

• 进入项目目录：

cd aVueProject

• 构建项目

npm install 

• 项目运行测试：

npm run dev

3. 输入命令npm run dev后将会输出项目的运行信息，其中包括项目运行的本地url与调试工具运行的url，例如：

按住ctrl然后点击url可直接跳转，跳转后网页显示如下，

到此项目创建完毕。
二、常见前端开发框架的引入
1.Router路由引入
注：在项目初始化时，下栏选择是的话可以直接在src/route路径下的index.js文件中对路由进行编辑，不用额外引入。如果选择否，则继续后续步骤
是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是

• 在项目根目录下打开命令行，然后输入：

npm install vue-router@4

• 控制台输出如下即是搭载完成：
  
• 接着我们打开项目，在项目的src/目录下新建一个router文件夹，用于存放可能的引用框架与后续的js文件。接着在router文件夹中创建index.js文件，在文件中输入

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue'),
    },
  ],
})

export default router;

• 接着回到src目录下的main.js文件，在代码中加入:

import router from './router';

app.use(router);

• 如下图所示(注：一般情况下JavaScript中语句结尾对;符号无固定要求，加不加都可以)：
  
• 到此Router路由在Vue3项目中的引入完成，可以在route目录下的index.js文件中对路由进行编辑了。
  2.Element Plus框架引入
• 在项目的根目录下打开cmd，然后输入：

npm install element-plus --save

• 控制台输入如下：
  
• 然后我们打开项目src目录下的main.js文件，加入代码：

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

app.use(ElementPlus);

• 如下图所示：
  
• 到此Element Plus框架在Vue3项目中引入完毕
  3.Element Plus icons图标引入
• 在项目根目录下打开命令行，然后输入：

npm install @element-plus/icons-vue

• 然后在项目src目录下的main.js文件中加入代码：

import * as ElementPlusIconsVue from '@element-plus/icons-vue';

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}

• 如下图所示：
  
• 到此，Element Plus icon图标在Vue3项目中引入完成