vuebaselou v1.0.1

https://cn.vuejs.org/v2/guide/

安装

npm install -g vue-cli vue init webpack 项目 Project name vuebase Project description test Author louyi0526 <77018749@qq.com> Vue build standalone Install vue-router? no Use ESLint to lint your code? no Set up unit tests no Setup e2e tests with Nightwatch? no

cd 项目 npm install #安装依赖 npm install axios #安装axios npm run dev

npm install --save-dev express mysql #安装express mysql

npm install --save-dev mockjs #安装mockjs

npm install --save vue-router #安装路由vue-router https://router.vuejs.org/zh/installation.html

安装Element https://element.faas.ele.me/#/zh-CN/component/installation

npm i element-ui -S npm install babel-plugin-component -D 然后，将 .babelrc 修改为： { "presets": ["es2015", { "modules": false }], "plugins": [ "transform-vue-jsx", "transform-runtime", "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] }

main引入

import { Button,ButtonGroup } from 'element-ui'

Vue.use(Button) Vue.use(ButtonGroup)

结束Element

安装swiper https://github.com/surmon-china/vue-awesome-swiper

npm install vue-awesome-swiper --save

main引入

import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper)

结束 swiper

安装图片懒加载 vue-lazyload https://github.com/hilongjw/vue-lazyload

npm install vue-lazyload --save-dev main引入 import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload)

结束 vue-lazyload

xxx.vue基础代码

xxx.vue基础代码结束

main.js注册全局自定义指令 v-focus

Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })

main.js注册全局过滤器

Vue.filter('capitalize', function (value) { moneyChange: function (value) { if (typeof value === "number") return '$'+value; return value; } })

// 添加请求拦截器 Axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 if (config.method == "post") { config.data = qs.stringify(config.data); } return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });

// 添加响应拦截器 Axios.interceptors.response.use(function (response) { // 对响应数据做点什么 console.log(response); return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });

跨域

修改config文件夹下的index.js proxyTable: { '/api': { target: 'http://www.pull.com', //源地址 changeOrigin: true, //改变源 pathRewrite: { '^/api': '/index' //路径重写 } }

}, 使用var url= "/api/news";

路由vue-router

//main.js import VueRouter from 'vue-router' import Routers from './components/Routers' import HelloWorld from './components/HelloWorld'

Vue.use(VueRouter)

var router = new VueRouter({ routes: { path: "/routers", component: Routers }, { path:"/HelloWorld", component: HelloWorld } })

new Vue({ el: '#app', router, components: { App }, template: '' }) //App.vue

新建文件及内容 main.js引入新建文件

import Vue from 'vue' import VueRouter from 'vue-router' import Routers from '../components/Routers' import HelloWorld from '../components/HelloWorld'

Vue.use(VueRouter)

export default new VueRouter({ routes: { path: "/routers", component: Routers }, { path:"/HelloWorld", component: HelloWorld } })