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

---

前言

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

---

一、全局安装vue-cli

两种方式

1. npm install -g @vue/cli 国外下载会慢点 该命令安装最新版本脚手架
2. 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小程序还能写写，然后之前一直用的是一些开源框架，还有公司大佬搭的，然后抱着巩固知识的想法下，就准备自己搭建一套哈哈，然后在把自己搭建过程记录下来，也是挺不错的，然后就开干了哈哈。