vue-cli + vue2.0 + vue-router2 + axios + es6 + sass + elementUI-全家桶后台管理系统

前言：

一、学习是一个持久而又漫长过程,重在于"坚持",   愿你在不断坚持中早日成为Vue大神~，学习vue当然是要先安装环境。首先安装Nodejs就是第一步诺；nodejs的安装网上一搜一大把，这里记录windows的安装方式，方便在工作中快速查阅-博主是小鸟一个大神请绕道！

下载Nodejs:

下载并解压好 node.js,地址：https://i-blog.csdnimg.cn/blog_migrate/6b8b4efc7defcb0fc1edb85964cd4557.png   提示：根据自己电脑系统选择合适安装即可,推荐一个很不错的教程:猛戳这里试试不行？那你在猛戳这里试试。这里就不在跟大家演示了毕竟这不是我们的核心... , 不懂的可以在网上查,或者添加QQ群:732832280

安装node后查看版本

node -v

出现此信息说明安装成功:

v10.14.0

强大的node已经帮我们生成好npm   npm -v 

6.4.1

二、安装淘宝npm（cnpm）

1.安装cnpm

   (1)输入以下命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

(2)输入cnpm -v输入是否正常，这里肯定会出错。

cnpm -v

(3)添加系统变量path的内容

　　因为cnpm会被安装到D:\Program Files\nodejs\node_global下，而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用cnpm。

三、在存放项目位置新建一个文件夹,博主这是D盘systemSetUp

就

打开编辑器,博主用的VS Code,如果你不是用的这个编辑器你可以打开终端在里面操作一样，注意要切换到D盘systemSetUp这个目录下：

Vue-cli搭建开发环境

我们采用Vue-cli进行快速搭建

搭建项目架构：

项目采用Webpack+Vue-router的架构方式，开始安装,    输入vue-cli安装命令：

mpm install vue-cli -g

 

这里的-g代表全局安装。

2.在命令行中初始化项目，我们采用的是webpack模板，输入初始化命令：

vue init webpack systemSetUps

这里的systemSetUps是我的项目文件夹名称，你可以起一个自己喜欢的名称。安装时根据项目需要配置所需要的模块。这里有一个小技巧，就是在你已经提前建立好了文件夹的时候，我们也进入了文件夹，这时候我们可以省略这个文件夹名称。如下情况：

mikdir systemSetUps
cd systemSetUps
vue init webpack

3.在命令行中，进入项目目录，使用npm install 安装ackage.json里项目的依赖包。如果你网速较慢的话，可以使用淘宝镜像的cnpm来进行安装。

4.查看是否安装正确。在命令行中输入 npm run dev ，如果能在浏览器中正常打开页面，说明安装正确。

到这里为止，我们的项目架构就建立好了，我们需要对Vue-cli给我们生成的文件进行一些必要的修改。

四、安装Element

Element是一套为开发者、设计师和产品经理准备的基于Vue2.0的组件库，提供了配套设计资源，帮助你的网站快速成型。在项目中自己写组件虽然灵活，但是效率并不高效，所以要学会站在巨人的肩膀上干活，Element就是巨人的肩旁，也是现在国内比较成熟的以一套Vue的组件库。所以我决定 使用这个组件库开发项目

npm安装

这里使用npm的方式安装，它能更好地和webpack打包工具配合使用。

npm n install element-ui --save

完成后引入模板，在在main.js中写入以下内容:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'
Vue.use(ElementUI)
new Vue({
  el: '#app',
  render: h => h(App)
})

对于，elementUI使用布局，请参考官网

五、安装Axios并从远程读取数据

       我们直接使用npm install来进行安装。。。。

npm n install axios --save

注意：由于axios是需要打包到生产环境中的，所以我们使用–save来进行安装。

引入Axios

我们在Pos.vue页面引入Axios，由于使用了npm来进行安装，所以这里不需要填写路径。

import axios from 'axios'

从服务器拉取数据，这仅仅只是个实例！！！

created(){
      axios.get('http://olls.afeng.com/DemoApi/oftenText.php')
      .then(response=>{
         console.log(response);
         this.oftenGoods=response.data;
      })
      .catch(error=>{
          console.log(error);
          alert('网络错误，请联系管理员！');
      })
  },

把axios的方法写到了created钩子函数中，我们使用了get 方法进行拉取数据，如果拉取成功用远端数据对oftenGoods进行赋值。

好了,其他的没有体现出来不要问我为什么, 因为那是需要你们自己去做的事情!    如果有疑问可以加QQ群:732832280一起学习交流。

源代码地址：