Skip to content

Instantly share code, notes, and snippets.

@llccing
Created November 10, 2017 14:17
Show Gist options
  • Save llccing/de9cb8f5ca8db06de74e1053354c7fa4 to your computer and use it in GitHub Desktop.
Save llccing/de9cb8f5ca8db06de74e1053354c7fa4 to your computer and use it in GitHub Desktop.

创建项目 (前提vue-cli, cnpm)

  • 通过vue-cli生成项目
    • vue-router 路由
    • vuex 全局状态管理
  • 安装axios,进行ajax请求
  • 引入iview,UI组件
  • 可选Echarts,图表
    • node版
    • js库,官方最新版。
@llccing
Copy link
Author

llccing commented Nov 10, 2017

一、 生成项目

  1. vue init webpack xxx
  2. cd xxx
  3. cnpm i
  4. npm run dev

二、编辑

  1. 修改路由
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import axiostest from '@/views/axiostest'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: HelloWorld,
      children:[
        {
          path: '/axiostest',
          name: 'axiostest',
          component: axiostest
        }
      ]
    }
  ]
})

  1. 安装axios
cnpm i axios -S

测试不能访问本地

axios
        .get("./data.json")
        .then(data => {
          console.log(data);
        })
        .catch(data => {
          console.log(data);
        });
  1. 配置代理,实现跨域访问

前后端分离的情况下,跨域访问 通过cros, jsonp,
proxy , nginx这样几种方式。我们采用proxy代理的方式比较简单,当然nginx可以一劳永逸。

 proxyTable: {
      "/api": {
        target: "http://lbstone.free.ngrok.cc", 
        changeOrigin: true,
        pathRewrite: {"^/api" : ""}
      }
    },

参考

参考

  1. 引入iview UI组件

iview官网

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(VueRouter);
Vue.use(iView);

// The routing configuration
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);

new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment