通用后台管理(二)——项目搭建

目录

前言

一、安装vue-cli依赖

1、使用yarn下载vue-cli

2、使用npm下载

3、检查一下是否下载成功

二、创建项目

1、创建项目,my-app是项目名称

2、 这里选择vue 2,蓝色表示选中的。

3、启动项目

三、下载项目依赖

四、配置项目

1、修改eslint(关闭代码编写不规范检查)

2、初始化文件

3、全局引入element-ui

4、基础路由配置

总结


前言

         使用vue-cli搭建一个简单的vue.在下载vue-cli之前需要先安装node.js和npm.而且最好是对应版本的npm,建议nodejs下载v16.13.2,对应的npm是8.1.2。

        具体步骤参考:http://t.csdnimg.cn/h4GrH


一、安装vue-cli依赖

1、使用yarn下载vue-cli

下载yarn

npm i -g yarn

安装vue-cli依赖

 yarn global add @vue/cli

2、使用npm下载

npm install -g @vue/cli

如果下载慢的话可以先更改npm的镜像

npm config set registry  https://npm.aliyun.com/

然后在重新下载一下。

3、检查一下是否下载成功

 vue -V

​可以查到版本号,并且是5开头的说明安装成功安装正确了 

如果下载了,但是还是查看不到版本信息,还是和没有安装的一样,可能是因为环境变量的原因,可以参考下面的解决办法:

【环境-0】Node js 本地环境安装及设置(亲测) - 知乎

二、创建项目

1、创建项目,my-app是项目名称

vue create my-app

2、 这里选择vue 2,蓝色表示选中的。

点开链接说明创建成功了。 

3、启动项目

npm run serve 

点开链接说明创建成功了。  


三、下载项目依赖

1、下载axios

npm install axios@0.27.2

2、下载echarts

npm i echarts@5.1.2

3、下载element-ui

npm i element-ui -S

4、下载vue-router

npm i vue-router@3.6.5

5、下载vuex

npm i vuex@3.6.2

6、下载mockjs

npm i mockjs

 7、下载less/less-loader

npm i less@4.1.2

npm i less-loader@6.0.0

四、配置项目

1、修改eslint(关闭代码编写不规范检查)

在vue.config.js文件中添加lintOnSave:false,

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,//关闭eslint校验lintOnSave:false,
})

2、初始化文件

在根目录下新建如下文件夹:

(1)新建router文件夹:

该文件夹下新建index.js文件:路由配置文件

(2)新建api文件夹

  • 该文件夹下新建mockServeData文件夹,存放mock模拟数据
  • 该文件夹下新建index.js文件:前端api接口
  • 该文件夹下新建mock.js文件:mock模拟后端请求数据

(2)新建store文件夹

(2)新建utils文件夹:项目工具文件

3、全局引入element-ui

在main.js中添加如下:

### import ElementUI from 'element-ui'; //导入
import 'element-ui/lib/theme-chalk/index.css';//导入相关css
import App from './App.vue';Vue.use(ElementUI);//全局注入new Vue({el: '#app',render: h => h(App)
});

4、基础路由配置

1、在main.js文件中导入vue-router

//导入vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)

2、创建路由组件

在src文件夹中新建一个views包含所有组件,

创建Home组件:

<template>
<h1>我是home</h1>
</template>
<script>
export default{data(){return{}}
}
</script>

创建User组件:

<template><h1>我是user</h1></template><script>export default{data(){return{}}}</script>

3、将组件和路由映射

在router/index.js中添加

const routes = [{ path: '/home', component: Home },{ path: '/user', component: User }]

4、创建router实例

在router/index.js中添加

const router = new VueRouter({routes // (缩写) 相当于 routes: routes
})

5、创建和挂载根实例

在router/index.js中添加

export default router 
//将router对象作为默认导出,在其他导入时直接导入router即可

在main.js中添加如下内容:

import router from "./router"
new Vue({router,render: h => h(App),
}).

6、路由出口,将路由匹配到的组件渲染在html中

在APP.vue中:

<template><div id="app"><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view></div>
</template><script>export default {name: 'App'}
</script>

总结

到这里vue项目及其配置都已经创建和配置成功了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3224057.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

【从零开始实现stm32无刷电机FOC】【理论】【3/6 位置、速度、电流控制】

目录 PID控制滤波单独位置控制单独速度控制单独电流控制位置-速度-电流串级控制 上一节&#xff0c;通过对SVPWM的推导&#xff0c;我们获得了控制电机转子任意受力的能力。本节&#xff0c;我们选用上节得到的转子dq轴解耦的SVPWM形式&#xff0c;对转子受力进行合理控制&…

STM32实战篇:按键控制LED

按键控制LED 功能要求 有两个按键&#xff0c;分别控制两个LED灯。当按键按下后&#xff0c;灯的亮暗状态改变。实物如下图所示&#xff1a; 由图可知&#xff0c;按键一端直接接地&#xff0c;故另一端所对应IO引脚的输入模式应该为上拉输入模式。 实现代码 #include "…

nvm下载

nvm下载 1.下载nvm安装包2.安装nvm3.修改settings.txt4.安装成功5.继续配置 下载nvm之前,你最好将你电脑上的node卸载掉,直接在winx中卸载就行 1.下载nvm安装包 https://github.com/coreybutler/nvm-windows/releases 2.安装nvm 3.修改settings.txt root: E:\nvm\install\nv…

DMA方式的知识点笔记

苏泽 “弃工从研”的路上很孤独&#xff0c;于是我记下了些许笔记相伴&#xff0c;希望能够帮助到大家 目录 1. DMA基本概念 2. DMA传送过程 易错点 DMA控制器操作流程 3. DMA传送方式 这是单总线的结果 &#xff08;CPU说了算 所以不会产生于CPU的冲突&#xff09; 这…

新闻资讯整合平台:一站式满足企业信息需求

摘要&#xff1a; 面对信息爆炸的时代&#xff0c;企业如何在海量数据中快速获取有价值资讯&#xff0c;成为提升竞争力的关键。本文将探讨如何通过一站式新闻资讯整合平台&#xff0c;实现企业信息需求的全面满足&#xff0c;提升决策效率&#xff0c;同时介绍实用工具推荐&a…

Transformer中的编码器和解码器结构有什么不同?

Transformer背后的核心概念&#xff1a;注意力机制&#xff1b;编码器-解码器结构&#xff1b;多头注意力等&#xff1b; 例如&#xff1a;The cat sat on the mat&#xff1b; 1、嵌入&#xff1a; 首先&#xff0c;模型将输入序列中的每个单词嵌入到一个高维向量中表示&…

Vuforia AR篇(八)— AR塔防上篇

目录 前言一、设置Vuforia AR环境1. 添加AR Camera2. 设置目标图像 二、创建塔防游戏基础1. 导入素材2. 搭建场景3. 创建敌人4. 创建脚本 前言 在增强现实&#xff08;AR&#xff09;技术快速发展的今天&#xff0c;Vuforia作为一个强大的AR开发平台&#xff0c;为开发者提供了…

工业机床CNC设备如何上云?

工业机床CNC设备如何上云&#xff1f; 工业机床的计算机数控&#xff08;CNC&#xff09;设备实现远程监控数据上云&#xff0c;是现代制造业智能化转型的关键一环。这一过程不仅能够实时监测设备状态、优化生产流程&#xff0c;还能通过大数据分析提升生产效率与产品质量&…

数据结构--二叉树相关习题5(判断二叉树是否是完全二叉树 )

1.判断二叉树是否是完全二叉树 辨别&#xff1a; 不能使用递归或者算节点个数和高度来判断。 满二叉树可以用高度和节点来判断&#xff0c;因为是完整的。 但是完全二叉树前面是满的&#xff0c;但是最后一层是从左到右连续这种 如果仍然用这种方法的话&#xff0c;如下图…

Chromium编译指南2024 Linux篇-同步Chromium第三方库(四)

1.引言 在成功拉取Chromium源码并创建新分支后&#xff0c;我们需要进一步配置开发环境。这包括拉取必要的第三方库以及设置hooks&#xff0c;以确保我们能够顺利进行编译和开发工作。以下步骤将详细介绍如何进行这些配置。 2.拉取第三方库以及hooks Chromium 使用了大量的第…

WSL2编译使用6.6版本内核

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、有什么变化二、下载6.6内核三、开始编译1.安装环境2.开始编译 四、使用1.杀死虚拟机2.防止内核文件3.修改配置文件 总结 前言 最近出了一件不大不小的事&a…

【前端速通系列|第二篇】Vue3前置知识

文章目录 1.前言2.包管理工具npm2.1下载node.js2.2配置 npm 镜像源2.3 npm 常用命令 3.Vite构建工具4.Vue3组件化5.Vue3运行原理 1.前言 本系列文章旨在帮助大家快速上手前端开发。 2.包管理工具npm npm 是 node.js中进行 包管理 的工具. 类似于Java中的Maven。 2.1下载nod…

C++之goto陈述

关键字 goto用于控制程式执行的顺序&#xff0c;使程式直接跳到指定标签(lable) 的地方继续执行。 形式如下 标签可以是任意的识别字&#xff0c;后面接一个冒号。 举例如下 #include <iostream>int main() {goto label_one;label_one: {std::cout << "Lab…

第241题| 确定极限中参数问题 | 武忠祥老师每日一题

解题思路&#xff1a;确定极限中的参数的方法是求这个极限&#xff1b;求极限根据类型选方法。 形可以用到三种方法&#xff1a;洛必达&#xff0c;等价&#xff0c;泰勒。 先观察题目&#xff0c;将看成一个整体&#xff0c;同时,并令,整理之后如下&#xff1a; 这里也要想办…

如何使用uer做多分类任务

如何使用uer做多分类任务 语料集下载 找到这里点击即可 里面是这有json文件的 因此我们对此要做一些处理&#xff0c;将其转为tsv格式 # -*- coding: utf-8 -*- import json import csv import chardet# 检测文件编码 def detect_encoding(file_path):with open(file_path,…

16:9横屏短视频素材库有哪些?横屏短视频素材网站分享

在这个视觉内容至关重要的时代&#xff0c;16:9横屏视频因其宽广的画面和优越的观赏体验&#xff0c;已经成为无数创作者和营销专家的首选格式。但要创造出吸引人的横屏视频&#xff0c;高质量的视频素材库是不可或缺的。不管你是资深视频制作人还是刚入行的新手&#xff0c;下…

13 - matlab m_map地学绘图工具基础函数 - 介绍创建管理颜色映射的函数m_colmap和轮廓图绘制颜色条的函数m_contfbar

13 - matlab m_map地学绘图工具基础函数 - 介绍创建管理颜色映射的函数m_colmap和轮廓图绘制颜色条的函数m_contfbar 0. 引言1. 关于m_colmap2. 关于m_contfbar3. 结语 0. 引言 本篇介绍下m_map中用于创建和管理颜色映射函数&#xff08;m_colmap&#xff09;和 为轮廓图绘制颜…

JFlash读取和烧录加密stm32程序

JFlash读取和烧录加密stm32程序 安装后JFlash所在的目录&#xff1a;C:\Program Files\SEGGER\JLink 一、烧写加密程序 1、打开C:\Program Files\SEGGER\JLink目录&#xff0c;找到JFlash.exe,双击它&#xff0c;就可以打开该执行程序。见下图&#xff1a; 2、选择“Create …

微信小程序毕业设计-书店系统项目开发实战(附源码+论文)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;微信小程序毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计…

骏网一卡通之类的游戏卡有什么用?

感觉现在打端游的人越来越少了 而且游戏充值卡显得就很鸡肋&#xff0c;在家里整理东西&#xff0c;翻出来好多骏网一卡通&#xff0c;但是我又不打游戏 想着把这卡送给有需要的朋友&#xff0c;不然也是浪费&#xff0c;问了一圈送不出去 还好最后在收卡云上卖掉了&#xf…