Vue学习之安装依赖与数据来源-tutorial js-php.cn

今天，给大家分享一个小型的后台管理系统，感兴趣的朋友了解一下，希望能对你有所启发。

一、构建项目与安装依赖

　　构建项目采用vue-cli脚手架搭建，npm、cnpm、vue-cli这些知识的基础，网上一大片一大片的，就不过多的描述了。难理解的是里面的配置文件，初学的时候确实费了很多劲，先不用去管太多的配置文件，这些主要是以后上线打包的一些配置问题。这里主要关注一下如何安装依赖，依赖就是一个项目运行需要的模块，比如使用axios来获取数据，就需要安装相应模块。项目依赖在根目录下的package.json文件中，如下是我项目使用的依赖包：

"dependencies": {
"axios": "^0.18.0",
"echarts": "^4.2.1",
"element-ui": "^2.7.2",
"mockjs": "^1.0.1-beta3",
"vue": "^2.5.2",
"vue-awesome": "^3.5.1",
"vue-particles": "^1.0.9",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.1"
},

Salin selepas log masuk

　　在最开始项目构建后，有部分依赖包，如vue、vue-router是项目初始化后就存在的，其他的如果做项目时确定需要用到的依赖包，比如获取数据需要的axios、UI设计框架element-ui这样的可以直接在该处写上名字和版本，其中^表示匹配该符号后面第一个数字开头的版本的最新版；这里写成后在终端中npm install或者npm i可以安装这些依赖，然后在根目录下会出现node_modules文件夹，这个文件夹都是依赖包文件，不需要我们修改任何东西，当然也不要删除，如果不小心删除了，再次npm i就可以了。

　　如果其他的一些模块不能确定需要使用的，在你做网页时想到或者网上搜索到需要使用，再考虑单独引入，引入的时候在终端中使用npm install **（模块名字）的方法进行安装，安装后的模块名称会自动出现在package.json文件的dependencies中。

相关教程：vue视频教程

二、关于数据源

　　项目中的数据从哪里来呢，这是我最开始最常纠结的问题。其实对于前端来说，项目的数据应该都来自于配套的后端程序，前后端分离后，后端处理好从项目业主提供的原始数据，提供给前端对外的数据API接口，这个接口是双方约定好的，比如一些返回状态，错误码，一些格式或者名称等。但是开发的时候实际是同时开发的，也就是前端在开发过程中要使用的数据需要自己先根据需求进行模拟，看其实际在网页的表现是否满足需求。当然，另外也有一些网络API接口，这相当于别人处理好的数据，你根据其使用规则来使用。

　　数据的获取在vue里有很多种方法，比如vue-resource的this.$http.get/post、jQuery的$.ajax、axios的this.$axios.get/post、fetch方法等。这些每一种方法都是可行的，需要掌握的基础还是post/get请求方法，只是我自己对这块都停留在会简单的使用上面，这里就不深入探讨这个了，这里只是说一些数据的来源。

　　1.vue脚手架项目可以使用mock数据，mock.js是随机生成模拟数据，官网地址http://mockjs.com/。我在项目里只使用了少量的mock数据，如下：

1   Mock.mock(/login/, {
2     data: {
3       userId: "@integer(1,10)",
4       "nickname|1": ["Amy", "Michael", "Jack", "John", "Albert","Norton"],
5     },
6   });

Salin selepas log masuk

　　这里要在main.js中导入mock.js，上述代码在数据请求时访问“login”地址，对外提供1个nickname，在后面的数组中随机生成。如果需要其他随机生成的内容，另外自己去模拟。相关教程：js视频教程

　　2.直接在组件的data中定义数据，这是最简单的方式了，如下：

  data() {
    return {
      introduction: [
        "登录页有粒子动态效果，采用VueParticles，各项参数设置可参看https://www.jianshu.com/p/53199b842d25；",
        "登录后的昵称是用mock数据做的，mock.js需要在main.js中导入；",
        "左侧导航栏是根据element-ui的导航写的，直接可用index跳转，顶部导航为ui的面包屑导航；",
        "天气预报采用的echarts，需要导入使用，样式应该可以更美观，此处只做了基础的改变，数据为网上找的一个接口，部分城市可能无数据；",
        "文本编辑vue-quill-editor需要在main.js中导入，仅在编辑页做了变化示例，后期可考虑传值到父组件，可插入图片；",
        "表格操作是根据某后台管理系统的网页仿写的，有增删改查等功能，选择管理员和一般用户按钮可以看到不同的菜单，使用watch监测数据变化；",
        "新闻资讯也是网上找的数据接口，设置自动获取时间改变接口的时间参数每天自动刷新，开发时设置proxyTable代理进行跨域；",
      ]
    };
  },

Salin selepas log masuk

　　主要注意数据要用return返回，不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件，就类似于一个函数里的每个不同的实例这个概念。

　　3.使用vuex数据管理仓库，这个一般在大型的项目数据比较复杂的时候使用，我GitHub上面的那个项目没使用，但是在最开始学习的时候也在一个小页面中使用过，学习地址https://vuex.vuejs.org/zh/。主要是State、Getter、Action、Mutations、Module这5个大块，也有其辅助函数map开头的几个，自己学习的不算很深入，还需要加强学习。

import Vue from &#39;vue&#39;;
import Vuex from &#39;vuex&#39;;
Vue.use(Vuex);
const state = {
    person: [{
        name: &#39;张三&#39;,
        age: &#39;23&#39;,
        sex: &#39;男&#39;,
        likes: &#39;篮球&#39;,
        introuce: &#39;&#39;,
        }, 
      {
        name: &#39;李四&#39;,
        age: &#39;25&#39;,
        sex: &#39;男&#39;,
        likes: &#39;游泳&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;王五&#39;,
        age: &#39;24&#39;,
        sex: &#39;男&#39;,
        likes: &#39;乒乓&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;马六&#39;,
        age: &#39;22&#39;,
        sex: &#39;男&#39;,
        likes: &#39;排球&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;周星星&#39;,
        age: &#39;27&#39;,
        sex: &#39;男&#39;,
        likes: &#39;羽毛球&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;李丽&#39;,
        age: &#39;21&#39;,
        sex: &#39;女&#39;,
        likes: &#39;看书&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;付兰&#39;,
        age: &#39;21&#39;,
        sex: &#39;女&#39;,
        likes: &#39;看电影、游泳&#39;,
        introuce: &#39;&#39;
      },
    ]
}
    const getters = {   
      showList(state){
        for (let i = 0; i < state.person.length; i++) { 
        state.person[i].introduce = &#39;我叫&#39;+state.person[i].name+&#39;，我今年&#39;+state.person[i].age+&#39;岁了，我的爱好是&#39;+state.person[i].likes   
        }  
        return state.person
      }
    };

    const mutations = {
      add(state,data){
        state.person.push(data)
      },
      del(state,i){
        state.person.splice(i,1)
      },
      edit(state,{index,data}) {  
        state.person.splice(index,1,data)
      },
    };


 
    const actions = {
      addPerson({commit},data){
        commit(&#39;add&#39;,data)
      },
      delPerson({commit},data){
        commit(&#39;del&#39;,data)
      },
      editPerson({commit},data){
        commit(&#39;edit&#39;,data)
      },
    };

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
});

Salin selepas log masuk

import Vue from &#39;vue&#39;;
import Vuex from &#39;vuex&#39;;
Vue.use(Vuex);
const state = {
    person: [{
        name: &#39;张三&#39;,
        age: &#39;23&#39;,
        sex: &#39;男&#39;,
        likes: &#39;篮球&#39;,
        introuce: &#39;&#39;,
        }, 
      {
        name: &#39;李四&#39;,
        age: &#39;25&#39;,
        sex: &#39;男&#39;,
        likes: &#39;游泳&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;王五&#39;,
        age: &#39;24&#39;,
        sex: &#39;男&#39;,
        likes: &#39;乒乓&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;马六&#39;,
        age: &#39;22&#39;,
        sex: &#39;男&#39;,
        likes: &#39;排球&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;周星星&#39;,
        age: &#39;27&#39;,
        sex: &#39;男&#39;,
        likes: &#39;羽毛球&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;李丽&#39;,
        age: &#39;21&#39;,
        sex: &#39;女&#39;,
        likes: &#39;看书&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;付兰&#39;,
        age: &#39;21&#39;,
        sex: &#39;女&#39;,
        likes: &#39;看电影、游泳&#39;,
        introuce: &#39;&#39;
      },
    ]
}
    const getters = {   
      showList(state){
        for (let i = 0; i < state.person.length; i++) { 
        state.person[i].introduce = &#39;我叫&#39;+state.person[i].name+&#39;，我今年&#39;+state.person[i].age+&#39;岁了，我的爱好是&#39;+state.person[i].likes   
        }  
        return state.person
      }
    };

    const mutations = {      add(state,data){
        state.person.push(data)
      },
      del(state,i){
        state.person.splice(i,1)
      },
      edit(state,{index,data}) {  
        state.person.splice(index,1,data)
      },
    };


 
    const actions = {      addPerson({commit},data){
        commit(&#39;add&#39;,data)
      },
      delPerson({commit},data){
        commit(&#39;del&#39;,data)
      },
      editPerson({commit},data){
        commit(&#39;edit&#39;,data)
      },
    };

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
});

Salin selepas log masuk

View Code

　　上述代码是一个很简单的状态管理，单独定义一个仓库store，State里定义数据，Getter获取State数据相当于计算属性，Mutations方法函数、Action执行Mutations。最后在组件里可以使用这个store里的数据，使用方法this.$store.dispatch("addPerson", data)，主要是dispatch方法。

　　这种方法在上线时如果数据复杂也建议使用这种方法，将State里数据的通过相关axios等方法获取。

　　4.网络API数据，网络上有很多开源的API，也有一些收费的API，这些API一般以json或者jsonp的格式存在。收费的主要需要注意一般都有跨域问题存在。

　　开发时的跨域在根目录下的config文件夹下的index.js中配置，找到proxyTable配置，在module.exports的dev里面

    proxyTable: {
      &#39;/api&#39;: {  //代理地址  
        target: &#39;http://api01.idataapi.cn:8000/article&#39;,  //需要代理的地址  
        changeOrigin: true,  //是否跨域  
        secure: false,    
        pathRewrite: {  
            &#39;^/api&#39;: &#39;&#39;   //本身的接口地址没有 &#39;/api&#39; 这种通用前缀，所以要rewrite，如果本身有则去掉  
        },
    }
    },

Salin selepas log masuk

　　这样在获取数据时api就是代表了http://api01.idataapi.cn:8000/article这个网站，然后通过拼接得到正确的数据接口。this.$axios.get('api’ + url)，这个url是接口后一部分的网址，注意与api之间的'/'，如果前面有后面则不要加，如果没有后面开始就要加。这样开发状态下代理跨域就完成了。

　　线上的跨域其实如果是有后端系统的项目，一般有后端服务器端设置，上线后其实都在同一域，不存在跨域，如果需要跨域，一般由后端来解决也方便些。但是如果实在没办法，那网上找了也有很多其他方法，我主要采用的是nginx反向代理的方法。将前端代码打包后放到nginx服务器，在nginx配置里设置代理即可。如下：

        location /api/ {
            rewrite ^/b/(.*)$ /$1 break;
            add_header &#39;Access-Control-Allow-Origin&#39; &#39;*&#39;;
            proxy_pass http://api01.idataapi.cn:8000/article/;
        }

Salin selepas log masuk

　　这个配置在nginx安装后的目录下的config文件夹nginx.conf文件里下，在 server里添加上述代码，即表示了用api代理http://api01.idataapi.cn:8000/article/地址。

　　以上这些内容，真的是说起来可以算知道，但是自己遇到问题的时候真的好困难，一个自学者的悲哀吧，就算网上有人回复了，其实有时候也看不到你到底哪里出错了，还是要靠自己。

Atas ialah kandungan terperinci Vue学习之安装依赖与数据来源. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!