vue3模版创建

发布于 29 天前  43 次阅读


内容纲要

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

世界のネズミは彼らが望むものに依存し、彼らは彼ら自身から誰も求めません
最后更新于 2024-09-08