집 > 기사 > 웹 프론트엔드 > Vue 학습 설치 종속성 및 데이터 소스

Vue 학습 설치 종속성 및 데이터 소스

little bottle앞으로: 2019-04-29 11:48:432542검색

오늘은 작은 백엔드 관리 시스템을 공유하겠습니다. 관심 있는 친구들이 이에 대해 배울 수 있기를 바랍니다.

1. 프로젝트 빌드 및 종속성 설치

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"
},

초기 프로젝트가 빌드된 후 다음과 같은 일부 종속성 패키지가 있습니다. vue 및 vue-router는 프로젝트가 초기화된 후에 존재합니다. axios 및 데이터를 얻는 데 필요한 UI 디자인 프레임워크 element-ui 등 프로젝트 작업 시 사용해야 하는 다른 종속성 패키지를 결정하면 거기에 이름과 버전을 직접 쓸 수 있습니다. 여기서 ^는 기호 뒤의 첫 번째 숫자로 시작하는 최신 버전과 일치함을 의미합니다. 이를 작성한 후 터미널에서 npm install 또는 npm i를 사용하여 이러한 종속성을 설치할 수 있습니다. node_modules 폴더는 루트 디렉터리에 나타납니다. 이 폴더는 모두 종속 패키지 파일이므로 아무것도 수정할 필요가 없으며, 실수로 삭제한 경우 npm i만 다시 사용하면 됩니다.

그 밖에 어떤 모듈을 사용해야 할지 잘 모르겠으면 웹페이지를 만들 때나 인터넷에서 검색할 때 생각해보시고, 따로 소개할 때 고려해 보세요. npm install **(모듈 이름) 방법을 사용하여 설치하면 설치된 모듈 이름이 package.json 파일의 종속성에 자동으로 표시됩니다.

관련 튜토리얼: vue 비디오 튜토리얼

2. 데이터 소스 정보

project from? 음, 이것이 제가 처음에 가장 많이 고민했던 질문입니다. 실제로 프론트엔드의 경우 프로젝트 데이터는 모두 지원하는 백엔드 프로그램에서 나와야 합니다. 프론트엔드와 백엔드가 분리된 후 백엔드는 프로젝트 소유자가 제공한 원본 데이터를 처리하여 제공합니다. 이를 프런트 엔드의 외부 데이터 API 인터페이스에 전달합니다. 이 인터페이스는 일부 반환 상태, 오류 코드, 일부 형식 또는 이름 등과 같이 양 당사자가 동의합니다. 그러나 은 실제로 동시에 개발됩니다. 즉, 개발 과정에서 프런트 엔드에서 사용할 데이터는 실제 성능이 있는지 확인하기 위해 필요에 따라 을 시뮬레이션해야 합니다. 웹페이지가 요구사항을 충족합니다. 물론, 다른 사람이 처리하는 데이터와 동등한 일부 네트워크 API 인터페이스도 있으며, 해당 사용 규칙에 따라 사용할 수 있습니다.

vue-resource의 this.$http.get/post, jQuery의 $.ajax, axios의 this.$axios.get/post, vue에서 데이터를 얻는 방법은 다양합니다. 가져오기 방법 등 이러한 각 방법은 모두 가능합니다. 마스터해야 할 기본은 여전히 post/get 요청 방법입니다. 그러나 여기서는 이 방법의 간단한 사용법만 다루겠습니다. 여기에 일부 데이터가 있습니다.

1. vue 스캐폴딩 프로젝트는 모의 데이터를 사용할 수 있습니다. Mock.js는 시뮬레이션 데이터를 무작위로 생성합니다. 공식 웹사이트 주소는 http://mockjs.com/입니다. 프로젝트에서는 다음과 같이 소량의 모의 데이터만 사용했습니다.

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

여기서는 main.js에서 mock.js를 가져와야 합니다. 위의 코드는 데이터를 요청할 때 "로그인" 주소에 접근하여 외부 세계에 닉네임을 제공하는데, 이는 다음 배열에서 무작위로 생성됩니다. 무작위로 생성된 다른 콘텐츠가 필요한 경우 직접 시뮬레이션해 보세요. 관련 튜토리얼: js 비디오 튜토리얼

2. 구성 요소의 데이터에서 직접 데이터를 정의하는 것이 가장 간단한 방법입니다.

#🎜🎜 #

  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代理进行跨域；",
      ]
    };
  },

주로 데이터는 return과 함께 반환되어야 합니다. return으로 래핑되지 않은 데이터는 프로젝트에서 전역적으로 표시되므로 return을 사용한 후에는 다양한 오염이 발생합니다. 데이터의 변수는 현재에만 있습니다. 함수의 각 인스턴스 개념과 마찬가지로 구성 요소에 적용되며 다른 구성 요소에는 영향을 미치지 않습니다.

3. vuex 데이터 관리 웨어하우스를 사용합니다. 일반적으로 대규모 프로젝트의 데이터가 비교적 복잡할 때 사용합니다. GitHub의 프로젝트에서는 사용하지 않았지만 작은 페이지에도 있었습니다. 처음 학습을 시작했을 때 학습 주소는 https://vuex.vuejs.org/zh/입니다. 주로 State, Getter, Action, Mutations 및 Module의 5개 큰 블록과 보조 기능 맵의 처음 몇 개에 대해 자세히 연구하지 않았으며 아직 더 공부해야 합니다.

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
});

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
});

View Code

위의 코드는 매우 간단한 상태 관리입니다. 별도의 웨어하우스 저장소를 정의하고 State 데이터를 얻기 위한 Getter에서 데이터를 정의하는 것은 속성을 계산하는 것과 동일하며 Mutations 메소드 함수와 Action은 Mutations를 실행합니다. 마지막으로 this.$store.dispatch("addPerson", data) 메서드(주로 디스패치 메서드)를 사용하여 이 저장소의 데이터를 구성 요소에서 사용할 수 있습니다.

　　这种方法在上线时如果数据复杂也建议使用这种方法，将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，如果本身有则去掉  
        },
    }
    },

　　这样在获取数据时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/;
        }

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

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

위 내용은 Vue 학습 설치 종속성 및 데이터 소스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：TensorFlow.js 기반 JavaScript 머신러닝다음 기사：TensorFlow.js 기반 JavaScript 머신러닝