vue3模版创建

1、创建存放多个vue项目的根文件夹vue3，

注意：该文件夹路径不要有中文。

2、以管理员权限打开命令提示符（控制台）：

3、在命令提示符中进入文件夹vue3：

4、继续在命令提示符或windows PowerShell中创建vue3项目myblog：

npm create vue@latest

https://cn.vuejs.org/guide/quick-start.html#with-build-tools

5、只能在管理员模式下的命令提示符中安装项目（下载项目需要的库）：

cnpm install

6、创建、执行bat批处理文件，以便启动前端服务器：

运行bat文件后的效果：

7、在浏览器上打开单页应用网站：

http://localhost:5173/

8、运行vscode

9、在vscode中打开myblog项目：

10、给项目添加element plus库

（http://element-plus.org/zh-CN/guide/installation.html）

cnpm install element-plus --save

10-2、给项目添加element plus的图标库

（http://element-plus.org/zh-CN/component/icon.html#icon-%E5%9B%BE%E6%A0%87）

cnpm install @element-plus/icons-vue

知识点：查看项目用的库

11、改造默认项目，以符合我们项目的要求：

1、在main.js中全局引入element plus

（http://element-plus.org/zh-CN/component/icon.html#icon-%E5%9B%BE%E6%A0%87）

代码如下：

//导入element-plus

import ElementPlus from 'element-plus'

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

app.use(ElementPlus)

//全局导入ElementPlus的图标

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

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

 app.component(key, component)

}

2、删除无用内容：

3、修改App.vue文件内容变为如下图：

12、设置vue文件模板：

将vue.json文件内容设置为使用的模板：

{
    "Print to console": {
        "prefix": "vue3",
        "body": [
            "<script setup>",
            "$1",
            "</script>",
            "<template>",
            "$2",
            "</template>",
            "<style scoped>",
            "$3",
            "</style>"
        ],
        "description": "vue3"
    }
}

13、使用vue模板创建主页vue组件文件index.vue，并在index.vue的<template>标签内随意输入部分文字。

14、通过路由设置，将index.vue设置为网站最先显示的内容（在App.vue文件的<RouterView />中显示index.vue）。

将路由设置文件router/index.js文件设置为以下内容：

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('../views/index.vue')
    }
  ]
})

export default router