{"id":14976473,"url":"https://github.com/liubin915249126/vue2-study","last_synced_at":"2025-10-27T20:32:01.301Z","repository":{"id":26959147,"uuid":"104037529","full_name":"liubin915249126/vue2-study","owner":"liubin915249126","description":"vue 的webpack配置,按需加载,element-ui,vuex","archived":false,"fork":false,"pushed_at":"2024-07-26T04:05:20.000Z","size":2903,"stargazers_count":19,"open_issues_count":16,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T08:06:57.355Z","etag":null,"topics":["axios","element-ui","vue-router","vue2","vuex","webpack","webpack3"],"latest_commit_sha":null,"homepage":"https://liubin915249126.github.io/vue","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/liubin915249126.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-19T06:49:32.000Z","updated_at":"2024-03-07T12:41:42.000Z","dependencies_parsed_at":"2024-10-11T14:01:20.853Z","dependency_job_id":"f0d7908e-e664-4bcb-bb15-8347b5e11396","html_url":"https://github.com/liubin915249126/vue2-study","commit_stats":{"total_commits":87,"total_committers":3,"mean_commits":29.0,"dds":0.08045977011494254,"last_synced_commit":"04f3f378c4caca148c737a8812f124d3f74fbc9b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liubin915249126%2Fvue2-study","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liubin915249126%2Fvue2-study/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liubin915249126%2Fvue2-study/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liubin915249126%2Fvue2-study/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/liubin915249126","download_url":"https://codeload.github.com/liubin915249126/vue2-study/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238553269,"owners_count":19491398,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","element-ui","vue-router","vue2","vuex","webpack","webpack3"],"created_at":"2024-09-24T13:53:56.394Z","updated_at":"2025-10-27T20:31:55.776Z","avatar_url":"https://github.com/liubin915249126.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack-vue\n***\n### 浏览目录\n\u003e\n[3.安装webpack-html-plugin](https://github.com/liubin915249126/vue2-study#3安装webpack-html-plugin)   \n\n[4安装vue](https://github.com/liubin915249126/vue2-study#4安装vue)   \n\n[5安装webpack-dev-server热更新](https://github.com/liubin915249126/vue2-study#5安装webpack-dev-server热更新)   \n\n[6安装babel](https://github.com/liubin915249126/vue2-study#6安装babel)   \n\n[7安装vue-loader处理vue的文件](https://github.com/liubin915249126/vue2-study#7安装vue-loader处理vue的文件)   \n\n[8使用路由vue-router2](https://github.com/liubin915249126/vue2-study#8使用路由vue-router2)\n\n[9.1vuex的基本应用](https://github.com/liubin915249126/vue2-study#9vuex的应用)  \n\n[9.2state的拆分](https://github.com/liubin915249126/vue2-study#92用module拆分state)   \n\n[10组件化,及组件间传值](https://github.com/liubin915249126/vue2-study#10vue组件化及组件间传值)  \n\n[11.使用nodejs+koa2提供后台接口](https://github.com/liubin915249126/vue2-study#11使用nodejs+koa2提供后台接口)  \n\n[12.设置koa允许前端跨域访问](https://github.com/liubin915249126/vue2-study#12设置koa允许前端跨域访问)  \n\n[13 使用axios访问后台接口](https://github.com/liubin915249126/vue2-study#13使用axios访问后台接口)\n\u003e\n\n***\n#### 使用方法\n\u003e\n```\n    git clone https://github.com/liubin915249126/vue2-study.git\n    cd vue2-study\n    安装cnpm镜像\n    npm install -g cnpm --registry=https://registry.npm.taobao.org\n    npm install //安装依赖包\n    npm start   //启动项目\n``` \n\u003e\n***\n\n#### 0.项目初始化\n\u003e\ncd 'to/your/path' npm init\n\u003e\n#### 1.安装 webpack \n\u003e\n分为全局安装和项目内安装\n```\n    npm install webpack -g\n    npm install webpack --save-dev\n``` \n\u003e\n#### 2.配置webpack.config.js文件\n```\n     const path = require('path');\n\n     module.exports = {\n         entry: './Script/main.js', //项目入口文件\n         output:{                    //输出编译后文件地址及文件名\n             path: path.resolve(__dirname, 'dist'),\n             filename: 'js/bundle.js'\n         }\n     };\n```          \n命令行里面执行 webpack 命令即可看到编译后的文件\n\n#### 3安装webpack-html-plugin\nnpm install html-webpack-plugin --save-dev\n```\n    const HtmlWebpackPlugin = require('html-webpack-plugin');\n    ...\n    plugins:[\n        ...\n        new HtmlWebpackPlugin({\n            title:'react 学习',\n            inject:'body',\n            filename:'index.html',\n            template:path.resolve(__dirname, \"index.html\")\n        }),\n        ...\n    ]\n```          \n\u003e\n再次执行webpack命令可看到多了一个index.html文件\n这个文件是根据模板生成的并自动引入打包生成的js文件\n运行打包后的index.html即可看到效果。\n\u003e\n#### 4.安装Vue\n\u003e\n```\n   npm install vue -save\n```\n修改main.js：\n```\n    import Vue from  'vue';\n\n    var MainCtrl = new Vue({\n        el:'#main',\n        data:{\n            message:'Hello world'\n        }\n    })\n```\n修改index.html:\n```\n   \u003cdiv id=\"main\"\u003e\n      \u003ch3\u003e{{message}}\u003c/h3\u003e\n   \u003c/div\u003e   \n```\n执行webpack打包运行index.html(打包的文件)报错，经查在webpack.config.js里面配置：\n```\n    ...\n    resolve: { alias: { 'vue': 'vue/dist/vue.js' } }\n```\n再次运行即可看到效果\n![效果图](https://github.com/liubin915249126/webpack-vue/blob/master/image/index1.png)\n\u003e\n#### 5.安装webpack-dev-server热更新\n\u003e\n```\n    npm install webpack-dev-server -g\n    npm install webpack-dev-server --save-dev\n    npm install vue-hot-reload-api --save-dev\n```\n 配置webpack.config.js\n```\n    ...\n    devServer: {\n        historyApiFallback: true,\n    },\n    ...\n```  \n配置package.json里面命令\n```\n    \"start\":\"webpack-dev-server --hot --inline --progress --open\"\n```\n执行 npm start 浏览器自动打开页面，更改文件后即可看到页面实时更新\n\n\u003e \n#### 6.安装babel\n\u003e\n在使用.vue文件之前先要安装babel(将es6语法转化为es5)\n```\n    npm install babel-core babel-loader babel-plugin-transform-runtime --save-dev \n    npm install babel-preset-stage-0 babel-runtime babel-preset-es2015 --save-dev \n```\n项目根目录新建.babelrc文件、配置：\n```\n    {\n    \"presets\": [\"es2015\", \"stage-0\"],\n    \"plugins\": [\"transform-runtime\"]\n    }\n```\n\u003e\n#### 7.安装vue-loader处理.vue的文件 \n\u003e\n安装loader 处理.css,.vue文件\n```\nnpm install css-loader style-loader vue-loader vue-html-loader --save-dev\n```\n配置webpack.config.js\n```\n   ...\n   module:{\n       loaders: [\n           {test: /\\.js$/,loader: 'babel-loader',exclude: /node_modules/},\n           {test: /\\.vue$/,loader: 'vue-loader'}]\n        },\n    //vue: {loaders: {js: 'babel'}}\n   ...\n```\n配置完运行报错：Cannot find module 'vue-template-compiler'\n安装vue-template-compiler\n```\ncnpm install vue-template-compiler --save-dev\n```\n\u003e\n\u003e\n 修改index.html:\n ```\n   \u003cbody\u003e\n    \u003cdiv id=\"main\"\u003e\n       \u003capp\u003e\u003c/app\u003e   \n    \u003c/div\u003e\n   \u003c/body\u003e\n ```\n\u003e\n\u003e\n新建src/index.vue:\n```\n  \u003ctemplate\u003e\n    \u003cdiv class=\"message\"\u003e{{ msg }}\u003c/div\u003e\n  \u003c/template\u003e\n\n    \u003cscript\u003e\n        export default {\n        data () {\n            return {\n            msg: 'Hello from vue-loader!'\n            }\n        }\n        }\n    \u003c/script\u003e\n\n    \u003cstyle\u003e\n        .message {\n        color: blue;\n        }\n    \u003c/style\u003e\n```\n\u003e\n\u003e\n修改main.js\n```\n    ...\n    import App from './src/index.vue';\n\n    new Vue({\n        el: '#main',\n        components: { App }\n    })\n```\n保存后运行 npm start 即可看到效果\n![效果图](https://github.com/liubin915249126/webpack-vue/blob/master/image/index2.png)\n\n修改代码，可看到修改后的效果。\n\u003e\n#### 8.使用路由vue-router2\n\u003e\n首先安装 vue-router:\n```\nnpm install vue-router --save\n```\n\u003e\n\n\u003e\n修改main.js:\n\u003e\n\n\u003e\n   1.引入APP,about两个组件导入router组件\n   引入子组件Child\n```\n    import App from './src/index.vue';\n    import About from './src/about.vue';\n    import Child from './src/children.vue' \n    import VueRouter from 'vue-router';\n\n    Vue.use(VueRouter)\n```  \n\u003e\n\n\u003e\n2.定义路由：\n嵌套路由用children:[]存放,子组件在父组件的\n```\n\u003crouter-view\u003e\u003c/router-view\u003e\n```\n中渲染,路由通过 \"/:id\" 定义参数通过链接 \"/about/123\"传递参数\n在组件中通过{{$route.params.id}}获取传参\n```    \nconst routes = [\n    { path: '/index', component: App },\n    { path: '/about/:id', component: About ,children:[\n        { path: 'child', component: child}\n    ]}\n]\n```\n\u003e\n\u003e\n 3. 创建 router 实例，然后传 `routes` 配置\n```    \n    const router = new VueRouter({\n        routes // （缩写）相当于 routes: routes\n    })\n```    \n\u003e\n\u003e\n4. 创建和挂载根实例。\n```\n    const app = new Vue({\n        router\n    }).$mount('#main')\n```\n\u003e\n\u003e\n5.修改index.html文件\n```\n    \u003cdiv id=\"main\"\u003e\n        \u003cp\u003e\n            \u003crouter-link to=\"/index\"\u003eindex\u003c/router-link\u003e\n            \u003crouter-link to=\"/about/123\"\u003eabout\u003c/router-link\u003e\n            \u003crouter-link to=\"/about/123/child\"\u003echild router\u003c/router-link\u003e\n        \u003c/p\u003e\n        \u003c!-- 路由匹配到的组件将渲染在这里 --\u003e\n        \u003crouter-view\u003e\u003c/router-view\u003e\n    \u003c/div\u003e\n```\n\u003e \n\u003e\n6.修改父组件about.vue\n写\u003c/template\u003e才发现，只能有一个顶级的HTML标签\n```\n\u003c/template\u003e\n    \u003cdiv\u003e\n        \u003cdiv class=\"message\"\u003e{{ msg }}\u003c/div\u003e\n        \u003cdiv\u003e\n        \u003cspan\u003e传递的参数为：{{ $route.params.id }}\u003c/span\u003e\n\n        \u003crouter-view\u003e\u003c/router-view\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/template\u003e    \n```\n\u003e \n\n#### 8.1路由重定向redirect\n\u003e\n```\nroutes: [\n    ...\n    { path: '/a', redirect: '/index' }\n  ]\n\n```\n访问/a时将跳转值/index对应的组件\n\u003e\n#### 8.2 路由懒加载\n\u003e\n用vue.js写单页面应用时，会出现打包后的JavaScript包非常大，影响页面加载，我们可以利用路由的懒加载去优化这个问题。将路由写法改为：\n```\n//定义路由\nconst routes = [\n    { path: '/index', component: resolve =\u003e require(['./src/index.vue'], resolve) },\n    {\n        path: '/about/:id', component: resolve =\u003e require(['./src/about.vue'], resolve) ,\n        children:[\n            { path: 'child', component: resolve =\u003e require(['./src/children.vue'], resolve)}\n    ]},\n    { path: '/a', redirect: '/index' }\n]\n```\n\u003e\n#### 8.3 js的方法跳转路由\n\u003e\n```\n    // 字符串\n    router.push('home')\n    // 对象\n    router.push({ path: 'home' })\n    // 命名的路由\n    router.push({ name: 'user', params: { userId: 123 }})\n    // 带查询参数，变成 /register?plan=private\n    router.push({ path: 'register', query: { plan: 'private' }})\n```\n\u003e\n\u003e\n参考文献:[vue-router](https://router.vuejs.org/zh-cn/essentials/nested-routes.html) \n效果图:![效果图](https://github.com/liubin915249126/vue2-study/blob/master/image/router.png) \n\u003e\n\n#### 9.vuex的应用\n\u003e\n安装vuex\n```\nnpm install vuex --save\n```\n\u003e\n\n##### 9.1基本用法：\n\u003e\n新建store.js文件：\n```\n        import Vue from 'vue';\n        import Vuex from 'vuex';\n\n        Vue.use(Vuex)\n        //创建Store实例\n        const store = new Vuex.Store({\n            // 存储状态值\n            state: {\n                count:1\n        },\n            // 状态值的改变方法,操作状态值\n            // 提交mutations是更改Vuex状态的唯一方法\n            mutations: {\n                increment(state){\n                    state.count++;\n                },\n                decrement(state){\n                    state.count--;\n                }\n        },\n            // 在store中定义getters（可以认为是store的计算属性）。Getters接收state作为其第一个函数\n            getters: {\n                \n        },\n            actions: {\n                \n        }\n        })\n        // 要改变状态值只能通过提交mutations来完成\n        export default store;\n```\n\u003e\n\u003e\n在main.js里面注入store;\n```\n    ...\n    //引入store\n    import store from './store.js'\n    ...\n    const app = new Vue({\n        router,\n        store\n    }).$mount('#main')\n```\n\u003e\n\u003e\n新建count.vue文件，并新建路由指向count组件参照[vue-router的使用](https://segmentfault.com/a/1190000011298261)。\ncount.vue文件：\n```\n    \u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cdiv\u003e{{$store.state.count}}\u003c/div\u003e\n        \u003cdiv\u003e\n        \u003cspan @click=\"increment\"\u003eincrement\u003c/span\u003e\n        \u003cspan @click=\"decrement\"\u003edecrement\u003c/span\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n    \u003c/template\u003e\n    \u003cstyle\u003e\n    \u003c/style\u003e\n    \u003cscript\u003e\n    export default {\n        data(){\n            return {};\n        },\n        methods:{\n            increment(){\n                this.$store.commit('increment')  \n            },\n            decrement(){\n                this.$store.commit('decrement')  \n            }\n        }\n    }\n    \u003c/script\u003e\n```\n效果图：\n![效果图](https://github.com/liubin915249126/vue2-study/blob/master/image/vuex1.gif)\n\u003e\n***\n#### 9.2用Module拆分state\n\u003e\n由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。\n为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter\n\u003e \n\u003e\n新建moduleA.js,moduleB.js\n#### [moduleA](https://github.com/liubin915249126/vue2-study/blob/master/Script/moduleA.js)\n#### [moduleB](https://github.com/liubin915249126/vue2-study/blob/master/Script/moduleB.js)\n并修改store.js:\n```\n...\nimport moduleA from './moduleA';\nimport moduleB from './moduleB';\n...\nVue.use(Vuex)\n//创建Store实例\nconst store = new Vuex.Store({\n    modules:{\n        moduleA, moduleB //es6的写法，合并模块\n    }\n})\n...\n```\n在组件里面想访问到state需要用到\n```\n    $store.state.moduleA.count\n    $store.state.moduleB.Name\n```\n效果图：\n![效果图](https://github.com/liubin915249126/vue2-study/blob/master/image/vuex2.gif)\nmutations里面修改state的方法依然不变 \n\u003e\n\n#### 10.Vue组件化及组件间传值\n##### 10.1 Vue组件化\n\u003e\n 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。\n\u003e\n\u003e\n组件[A](https://github.com/liubin915249126/vue2-study/blob/master/Script/src/component-a.vue)写法：\n```\n   \u003ctemplate\u003e\n   \u003cdiv class=\"componentA\"\u003e\n   ...\n   \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n    export default {\n    data () {\n        return {\n           msg: 'component-A',\n        } \n    }\n    }\n\u003c/script\u003e\n\u003cstyle\u003e\n  \n\u003c/style\u003e\n```\n\u003e\n\u003e\n组件[B](https://github.com/liubin915249126/vue2-study/blob/master/Script/src/component-b.vue)写法：\n```\n   \u003ctemplate\u003e\n   \u003cdiv class=\"message\" id=\"componentB\"\u003e\n        ...\n   \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n    import Vue from 'vue'\n    export default Vue.component('my-component', {\n            template: '#componentB ',\n            data(){\n                return {\n                      msg: 'component-B',\n                    }\n            }\n    })\n\u003c/script\u003e\n\u003cstyle\u003e\n\u003c/style\u003e\n```\n\u003e\n\u003e\n在父组件[component](https://github.com/liubin915249126/vue2-study/blob/master/Script/src/component.vue)\n分别引用挂在\n```\n   \u003ctemplate\u003e\n  \u003cdiv\u003e\n   \u003ccomponent-A \u003e\u003c/component-A\u003e\n   \u003ccomponent-B\u003e\u003c/component-B\u003e\n  \u003c/div\u003e  \n\u003c/template\u003e\n\n\u003cscript\u003e\n    import componentA from './component-a.vue';\n    import componentB from './component-b.vue'\n    export default {\n    data () {\n        return {\n        }\n     },\n     components:{\n         \"component-A\":componentA,\n         \"component-B\":componentB\n     }\n    }\n\u003c/script\u003e\n\u003cstyle\u003e\n\u003c/style\u003e\n```\n\u003e\n##### 10.2组件间传值\n\u003e\n  对于简单的父子组件或是同属同一父组件的兄弟组件之间的通信，vue提供了方法,没必要用到vuex\n\u003e\n\u003e\n##### 父组件向子组件传值：\n父组件：\n```\n    \u003ccomponent-A :logo=\"logoMsg\"\u003e\u003c/component-A\u003e //logoMsg是父组件data里的值\n```\n子组件：\n```\n   \u003ctemplate\u003e\n   \u003cdiv class=\"componentA\"\u003e\n      \u003cdiv\u003e{{logo}}\u003c/div\u003e\n   \u003c/div\u003e\n\u003c/template\u003e\n   ...\n   data(){\n\n   }\n   props:[\"logo\"],\n   ...\n```\n\u003e\n\u003e\n\n##### 子组件调用父组件方法并向父组件传值：\n\n父组件：\n```\n   \n   \u003ccomponent-A :logo=\"logoMsg\" @toParent=\"componenta\"\u003e\u003c/component-A\u003e\n   ...\n    methods:{\n         componenta:function(data){ //data就是子组件传递过来的值\n            this.data1 = data\n         }\n     }\n```\n\u003e\n\u003e\n子组件：\n```\n     methods:{\n        toParent:function(){\n            this.$emit('toParent',this.data1) //调用父组件toParent方法，并传递参数\n        }\n    }\n```\n\u003e\n\u003e\n效果图：\n![效果图](https://github.com/liubin915249126/vue2-study/blob/master/image/component.gif)\n\u003e\n\u003e\n\n##### 兄弟组件之间传值:在B组件修改父组件数据时。选择修改传给A组件的数据即可。\n\n效果图：\n![效果图](https://github.com/liubin915249126/vue2-study/blob/master/image/dataBrother.gif)\n\u003e\n\n#### 事件总线：不相关组件之间传递数据\n\u003e\nbus.js文件：\n```\n   import Vue from 'vue'\n   export default new Vue()\n```\n\u003e\n\u003e\n组件B $emit触发事件: \n``` \n  import Bus from './bus.js' \n  ...  \n   byBus:function(){\n           Bus.$emit('byBus',this.byBusData)\n        }\n```  \n\u003e\n\u003e\n  组件A $on接受事件传递数据\n```\n    ...\n    data(){\n    },\n    created(){\n       Bus.$on('byBus',(data)=\u003e{\n           this.busData = data\n       })\n    },\n```\n效果图：![效果图](https://github.com/liubin915249126/vue2-study/blob/master/image/bus.gif)  \n\u003e\n#### 更复杂的数据传递就要用到[vuex](https://github.com/liubin915249126/vue2-study#9vuex的应用)\n\n#### 11.使用nodejs+koa2提供后台接口\nnpm install koa koa-router --save-dev\n\u003e\n在根目录下下新建server/index.js文件index.js:\n```\n    const Koa = require('koa');\n    const router = require('koa-router')();\n    const app = new Koa();\n    router.get('/', (ctx, next)=\u003e {\n        ctx.response.body = '111'\n    });\n\n    app\n        .use(router.routes())\n        .use(router.allowedMethods());\n\n    app.listen(3000,()=\u003e{\n       console.log('server is start at port 3000')\n    });\n    \n```\n\u003e\npackage.json里面设置命令:\"server\":\"node server index.js\"\n启动服务:npm run server\n浏览器里面访问localhost/3000可看到返回值\n\u003e\n#### 12.设置koa允许前端跨域访问\n\n\u003e\n使用[koa2-cors](https://github.com/zadzbw/koa2-cors)设置跨域\n安装npm install koa2-cors --save-dev\n```\n   ...\n    app.use(cors({\n        origin: function (ctx) {\n            if (ctx.url === '/test') {\n                return false;\n            }\n            return '*';\n        },\n        exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],\n        maxAge: 5,\n        credentials: true,\n        allowMethods: ['GET', 'POST', 'DELETE'],\n        allowHeaders: ['Content-Type', 'Authorization', 'Accept'],\n    }));\n    ...\n```\n\u003e\n#### 13 使用axios访问后台接口\n\u003e\n安装axios：\n```\n   npm install axios --save\n```  \n在根目录新建server/request.js\n封装一个request函数，所有的请求都通过request函数,便于对于请求统一处理\n```\n    import axios from 'axios'\n    let BASE_URL = 'http1://localhost:3000'\n    export default function request(data){\n    let options = {...data} \n    options.url = `${BASE_URL}${data.url}`\n    return axios(options)\n            .then(checkStatus)\n            .then(parseJSON)\n            .catch()\n    }\n```\n(坑)axios.defaults.withCredentials = \"include\"   //请求时带上cookie\naxios请求默认是不加cookie的需要设置\n(坑)当设置请求时带上cookie时后端允许的跨域不能用\"*\"要说明协议+域名+端口\n请求数据效果图：[效果图](https://github.com/liubin915249126/vue2-study/blob/master/image/getData.gif)\n\u003e\n#### 14.使用elementui\n\u003e\n安装:npm i element-ui -S \n引入：\n```\n    import ElementUI from 'element-ui'\n    import 'element-ui/lib/theme-default/index.css'\n    Vue.use(ElementUI)\n```\n使用：使用前配置css,file加载器\n安装style-loader,css-loader\n```\n   npm install css-loader style-loader file-loader --save-dev\n```\n```\n   {\n        test: /\\.css$/,\n        loader: 'style-loader!css-loader'\n      },\n      {\n        test: /\\.(eot|svg|ttf|woff|woff2)(\\?\\S*)?$/,\n        loader: 'file-loader'\n      },\n      {\n        test: /\\.(png|jpe?g|gif|svg)(\\?\\S*)?$/,\n        loader: 'file-loader',\n        query: {\n          name: '[name].[ext]?[hash]'\n        }\n      }\n```\n\u003e\n#### 15.使用less\n\u003e\n安装:\n```\n    cnpm install less less-loader --save-dev\n```\n使用：\n```\n\u003cstyle lang='less'\u003e\n   .articleWrap{\n     .articleTop{\n       color:red;\n     }\n   }\n\u003c/style\u003e\n```\n\u003e\n#### 16.文章系统\n\u003e\n1.路由跳转传参：\n```\n\u003crouter-link :to=\"{ name:'articleinfo',params:{id:index}}\"\u003e\u003c/router-link\u003e \n```\n2.使用富文本编辑器：vue2-editor\n  安装：cnpm install vue2-editor --save \n  使用：import { VueEditor } from 'vue2-editor'\n\u003e\n#### 17区分生产环境与开发环境\n\u003e\n使用cross-env：设置开发环境\n安装：cnpm install cross-env --save-dev\n配置命令：\n```\n    \"start\": \"cross-env NODE_ENV=development webpack-dev-server --hot --inline --progress --open\",\n    \"build\":\"cross-env NODE_ENV=production webpack\"\n```\n修改webpack配置：\n```\n   if (process.env.NODE_ENV === 'production') {\n    config.plugins = (config.plugins || []).concat([\n        new webpack.DefinePlugin({\n            'process.env': {\n                'NODE_ENV': JSON.stringify('production'),\n            },\n            IS_PRODUCTION: true\n        }),\n        /*new webpack.optimize.UglifyJsPlugin({\n            compress: {warnings: false},\n            sourceMap: false\n        }),*/\n    ]);\n}\nelse {\n    config.plugins = (config.plugins || []).concat([\n        new webpack.DefinePlugin({\n            'process.env':\n            {\n                'NODE_ENV': JSON.stringify('development'),\n            },\n            IS_PRODUCTION: false\n        }),\n    ]);\n}\n```\n在程序里面通过：process.env.NODE_ENV 获取当前环境变量\n\u003e \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliubin915249126%2Fvue2-study","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliubin915249126%2Fvue2-study","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliubin915249126%2Fvue2-study/lists"}