【VUE】VUE - CLI 创建一个 VUE 3 项目 详细步骤 , 继承 路由、Element-UI-Plus

后端也得学学前端吧

一些简单的后台管理程序,你一个后端不会点前端行嘛你!博主跟着一步一步来!

搭建项目详细步骤

1、Node.js和npm的安装

NodeJS 官方下载地址

安装下载,这个很简单。

2、安装 Vue CLI

npm install -g @vue/cli

image.png

3、创建一个新的Vue项目

npx vue create vue-yanxi

过程中询问你一些配置选项。

1700632896116.png

4、进入目录选项

cd vue-yanxi

5、运行

npm run serve
  • serve看你package.json中怎么配置的。

image.png

6、运行成功

image.png

image.png

7、就可以在src 文件夹中的 Vue 文件中开始你的编辑了。

8、配置路由 Router.js

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

const routes = [
    {
   
        path: '/',
        name: 'AppHomepage',
        component: AppHomepage,
    }
];

const router = createRouter({
   
    history: createWebHistory(),
    routes,
});

export default router;

main.js

import {
    createApp } from 'vue'
import App from './App.vue'
// 导入你的路由配置
import router from './router';
import 'element-plus/dist/index.css'

createApp(App)
    .use(router)
    .mount('#app')

组件命名格式

组件命名格式 AppHomepage ,驼峰命名。

集成 Element-UI-Plus

npm install element-plus --save
import {
    createApp } from 'vue'
import App from './App.vue'
// 导入你的路由配置
import router from './router';
// 导入 Element-ui
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App)
    .use(ElementPlus)
    .use(router)
    .mount('#app')

总结

一定要多思考,如果人永远待在舒适圈的话,人永远不会成长。共勉

觉得作者写的不错的,值得你们借鉴的话,就请点一个免费的赞吧!这个对我来说真的很重要。૮(˶ᵔ ᵕ ᵔ˶)ა

最近更新

  1. TCP协议是安全的吗?

    2024-02-03 19:12:01       19 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-02-03 19:12:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-02-03 19:12:01       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-02-03 19:12:01       20 阅读

热门阅读

  1. 网安面试宝典

    2024-02-03 19:12:01       33 阅读
  2. 【数据结构】 - 队列 & 栈

    2024-02-03 19:12:01       26 阅读
  3. 力扣202-快乐数

    2024-02-03 19:12:01       41 阅读
  4. 力扣反转两次的数字

    2024-02-03 19:12:01       29 阅读
  5. leetcode-用栈实现队列

    2024-02-03 19:12:01       32 阅读
  6. Unity DOTween插件常用方法(一)

    2024-02-03 19:12:01       30 阅读
  7. MySQL进阶之触发器

    2024-02-03 19:12:01       26 阅读
  8. mysql b+搜索的算法次数的计算

    2024-02-03 19:12:01       30 阅读
  9. vscode 突然连接不上服务器了

    2024-02-03 19:12:01       31 阅读