vue-cli生成一个项目.md

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

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

一、 生成项目

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

2. 安装axios

cnpm i axios -S

测试不能访问本地

axios
        .get("./data.json")
        .then(data => {
          console.log(data);
        })
        .catch(data => {
          console.log(data);
        });

3. 配置代理，实现跨域访问

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

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

参考

参考

4. 引入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)
});