文章目录

前言
一、全局安装vue-cli
二、创建vue项目
- 1.用命令来创建vue项目
三、运行项目
- 1.项目目录解读
一、项目全局引入element ui
总结
写文初衷

前言

在开始之前，首先保证自己的开发环境上有node了，如果还没装的装，推荐使用nvm安装node，nvm是一个node包管理工具，可以方便node各个版本的切换。在cmd中使用node -v可以查看node版本，npm -v查看npm版本，
我的版本如下，建议node12 -16 之间吧。

一、全局安装vue-cli

两种方式

npm install -g @vue/cli 国外下载会慢点该命令安装最新版本脚手架
cnpm install vue-cli -g 国内镜像
注意:cnpm 之前先用npm下载cnpm
npm install -g cnpm --registry=http://registry.npm.taobao.org

安装完成大概这样

二、创建vue项目

1.用命令来创建vue项目

首先随便找个文件夹，比如我在D:\projects文件上，然后cmd 回车进入终端输入 vue create vue2-element-admin，接下来大概这个样子
ps(文件夹最好创建英文名，不信邪的小伙伴可以创建中文名字哈哈)

大概就这三行，大概解释下

第一行，vue2默认配置
第二行，vue3默认配置
第三行，自定义配置
这里我选三，按下回车，然后就可以看见又出来个新的配置选项

这里的空格就是选择你要的配置，简单的介绍下这几个配置

1.Babel 是一个 JavaScript 编译器。主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。（必选）
2.typescrrict js的超集，定义数据类型等等，目前v3+ts，react+ts很流行，v2的话我们就不选这个
3.Progressive Web App (PWA) Support 不是很清楚，没用过哈哈，不选
4.Router 路由选
5.vuex 状态管理选
6.CSS Pre-processors css预处理选
7.Linter / Formatter 代码检查选
8.Unit Testing 单元测试
9.E2E Testing 单元测试
所以这里我们选择1，4，5，6 ，7空格选完后回车，然后再选择2.x
css预处理这里我们选择sass，之前用less搭配element ui，打包上线后出现图标乱码的问题，element ui 用的也是sass，所以这里我推荐选择sass了，其他的选项看他英文来选就好了，没什么特别注意的地方了，最后这里用npm 下就好

三、运行项目

1.项目目录解读

npm 下完后就会发现在我们的文件目录有一个文件夹，接下来我们用vscode打开，结构大概这样子

然后我们点击上面的终端，在终端中输入 npm run serve,然后等待一段时间
会出现两个地址，上面的是本地地址，下面的是内网地址，内网地址一般用于开发的时候同一个局域网下的同事直接放这个地址就可以看到你的前端项目了

好，到这前端项目算是跑起来

一、项目全局引入element ui

怎么引入呢，那必须看官网啊地址 https://element.eleme.cn/#/zh-CN

步骤如下 终端输入
npm i element-ui -S

第二步找到main.js 把他引入进来

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'; //引入element ui组件
import 'element-ui/lib/theme-chalk/index.css';//引入样式Vue.use(ElementUI); //使用element 组件
Vue.config.productionTip = false
new Vue({router,store,render: h => h(App)
}).$mount('#app')

把他弄进来了我们肯定要想知道他到底有没有成功 main.js别忘记保存哈，我们去src\views\AboutView.vue 这个文件下面改点代码

<template><div class="about"><h1>This is an about page</h1><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></div>
</template>

然后打开页面发现按钮样式变了，ok,elemnt ui 引入成功

总结

经过上面的操作，我们就把项目初步的搭建起来了，然后也引用了第三方的ui组件库。

写文初衷

这是本人当程序员以来的第一篇博客，写的不好，有错误的地方，欢迎指正哈哈，为什么想写这篇博客的起因是，有一天在公司坐着摸鱼，百无聊赖，新公司用的主要是react，vue3，加ts这套组合拳，之前，也就上一年实习一年的公司是vue，然后来了新公司后就没写过vue2了，除了uniapp小程序还能写写，然后之前一直用的是一些开源框架，还有公司大佬搭的，然后抱着巩固知识的想法下，就准备自己搭建一套哈哈，然后在把自己搭建过程记录下来，也是挺不错的，然后就开干了哈哈。

从零开始搭建vue2.0+elementUi 后台管理系统一项目搭建相关推荐

基于vue2.0 + elementUI 后台管理平台
Vue-Admin-Demo 这是一个基于vue2.0 + elementUI 后台管理平台 Github: https://github.com/xiahuahua/vue-vux-demo(欢迎S ...
通用后台管理系统(2)-项目搭建
1.sunda-parent 管理jar包 2.sunda-common 2.1.pom.xml 2.2.常用工具类 2.2.1本地分布式上传工具类fastdfs 2.2.2 统一返回结果类 2.2. ...
Vue2.0 + ElementUI 手写权限管理系统后台模板（三）——页面搭建
框架布局本章只介绍基础布局,和一些主要的js,页面上基本上都是些交互事件,项目代码上都有注释,不懂的地方debug跑一变就知道了,只是这些事件基本上没有独立存在的,相互之间都有关联框架风格新建页 ...
Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述
简介这个权限管理就是为了方便,跟系统安全真的不沾边,只是根据后台返回的角色信息来生成他可以看见的菜单和按钮,显示菜单的方法是根据权限删除掉路由表里没有权限的路由,然后再动态添加,原本包含没有访问权限 ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
基于 vue.js + elementUI 后台管理系统（html）模板
mq-admin vue.js + elementUI 后台管理系统模板前言今年年初刚转型学前端,业务需要做一个后台管理系统.好嘛,GitHub,码云先爬一波,发现了许多大佬的作品.那时也刚转型走 ...
分布式电商项目五：使用人人开源搭建前后分离的后台管理系统
分布式电商项目五:使用人人开源搭建前后分离的后台管理系统现在我们开始搭建一个后台管理系统,使用的是码云上面的开源项目:人人开源需要使用两个开源项目:fast和fast-vue. 使用git把需要的 ...
[Django项目案例]搭建用户与商品后台管理系统
[Django项目案例]搭建用户与商品后台管理系统 1 搭建流程 1.1 创建Django项目 1.2 配置数据库 1.3 创建app并载入Settings 1.4 配置时区与静态文件夹 1.5 定义 ...

从零开始搭建vue2.0+elementUi 后台管理系统一项目搭建

文章目录

前言

一、全局安装vue-cli

二、创建vue项目

1.用命令来创建vue项目

三、运行项目

1.项目目录解读

一、项目全局引入element ui

总结

写文初衷

从零开始搭建vue2.0+elementUi 后台管理系统一项目搭建相关推荐

最新文章

热门文章

从零开始搭建vue2.0+elementUi 后台管理系统 一项目搭建

文章目录

前言

一、全局安装vue-cli

二、创建vue项目

1.用命令来创建vue项目

三、运行项目

1.项目目录解读

一、项目全局引入element ui

总结

写文初衷

从零开始搭建vue2.0+elementUi 后台管理系统 一项目搭建相关推荐

最新文章

热门文章

从零开始搭建vue2.0+elementUi 后台管理系统一项目搭建

从零开始搭建vue2.0+elementUi 后台管理系统一项目搭建相关推荐