原文地址http://blog.paascloud.net/2018/05/19/web/vuejs/first-vue/
搭建项目
初始化项目
1 2 3 4 5 6 7 | $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack paascloud-paas-web # 安装依赖,走你 $ cd paascloud-paas-web $ npm install $ npm run dev |
添加各种需要依赖的组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | λ cnpm install -S axios λ cnpm install -S crypto-js λ cnpm install -S echarts λ cnpm install -S element-ui λ cnpm install -S font-awesome λ cnpm install -S js-cookie λ cnpm install -S node-sass λ cnpm install -S nprogress λ cnpm install -S qs λ cnpm install -S sass-loader λ cnpm install -S store.js λ cnpm install -S vuex λ cnpm install -S lockr λ cnpm install -S vue-awesome-swiper λ cnpm install -S vue-infinite-scroll λ cnpm install -S vue-lazyload |
设置ESLINT
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | $ vi .editorconfig indent_size = 4 $ vi .eslintrc.js globals: { "$": true }, 'rules': { 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 'semi' : ['error','always'], 'indent': [2, 4, { 'SwitchCase': 1 }], 'space-before-function-paren': 0, '$': 0 // 0关闭 1警告 2错误 } 注意 这里需要修改src 下的文件以分号结尾 src/App.vue src/router/index.js src/components/Hello.vue src/main.js |
安装项目所需依赖
1 2 3 | $ cnpm install 没有cnpm的小伙伴建议安装一下cnpm https://npm.taobao.org/ $ npm install -g cnpm --registry=https://registry.npm.taobao.org |
建议 先创建 node_modules 这个文件夹 然后添加到excluded选项下 否则webstorm构建项目容易卡死
webpack.base.conf.js
1 2 3 4 5 6 7 8 | 'src': resolve('src'), 'assets': resolve('src/assets'), 'components': resolve('src/components'), 'views': resolve('src/views'), 'store': resolve('src/store'), 'mixins': resolve('src/mixins'), 'util': resolve('src/util'), 'filters': resolve('src/filters') |
启动项目
1 2 | $ npm run dev 访问 http://localhost:8080/ 看见久违的Hello World 项目第一步 搭建成功 |
集成所需插件
引入 Element
完整引入
1 2 3 4 5 6 7 8 9 10 11 | import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' import App from './App.vue' Vue.use(ElementUI) new Vue({ el: '#app', render: h => h(App) }) |
按需引入
首先,安装 babel-plugin-component:
1 | $ npm install babel-plugin-component -D |
然后,将 .babelrc 修改为
1 2 3 4 5 6 | "plugins": [["component", [ { "libraryName": "element-ui", "styleLibraryName": "theme-default" } ]], "transform-runtime"], |
接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | import { Input, Dialog, Button, Form, formItem, MessageBox, Message } from 'element-ui'; const components = [ Input, Dialog, Button, Form, formItem ]; components.map(component => { Vue.component(component.name, component); }); Vue.prototype.$pcMessageBox = MessageBox; Vue.prototype.$pcMessage = Message; Vue.prototype.$confirm = MessageBox.confirm; |
引入 vue-router
需要在 main.js 中写入以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | import routes from './router'; import VueRouter from 'vue-router'; Vue.use(VueRouter); # 传统的url方式 const router = new VueRouter({ mode: 'history', root: '/', routes }); router.beforeEach((to, from, next) => { if (to.meta.requestAuth) { if (PcCookie.get(enums.USER.LOGIN_NAME)) { next(); } else { next({ path: '/login' }); } } else { // NProgress.start(); next(); } }); router.afterEach(transition => { // NProgress.done(); }); |
然后修改 src/router/index.js
1 2 3 4 5 6 7 8 | import Hello from '@/components/Hello'; export default [ { path: '/', name: 'Hello', component: Hello } ]; |
引入 axios
需要在 main.js 中写入以下内容:
1 | 这里写代码片 |
引入 NProgress
需要在 main.js 中写入以下内容:
1 2 3 | import NProgress from 'nprogress'; import 'nprogress/nprogress.css'; Vue.prototype.$pcNProgress = NProgress; |
引入 axios
需要在 main.js 中写入以下内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | import axios from 'axios'; Vue.prototype.$http = axios.create({ timeout: 2000 }); Vue.prototype.$http.interceptors.request.use((config) => { let authToken = PcCookie.get(enums.USER.AUTH_TOKEN); config.headers.Authorization = authToken; return config; }, (error) => { return Promise.reject(error); }); Vue.prototype.$http.interceptors.response.use((res) => { if (res.data.code !== 200) { window.location.href = '/'; return Promise.reject(res); } } else { if (res.data) { return res.data; } } }, (error) => { if (error.response) { console.error('error: ', error.response); if (error.response.status === 500) { alert(error.response.data.message); } else if (error.response.status === 504) { alert('网关错误'); } else { console.log('Error', error.message); alert('接口请求失败或超时!请刷新重试'); } } else { alert('接口请求失败或超时!请刷新重试'); } return Promise.reject(); }); |
引入 vuex
需要在 src mkdir store main.js 中写入以下内容:
1 2 3 4 5 6 7 8 9 10 | import Vuex from 'vuex'; import store from './store/'; Vue.use(Vuex); new Vue({ el: '#app', router, store, template: '<App/>', components: {App} }); |
引入 vue-lazyload
需要在 main.js 中写入以下内容:
1 2 3 4 5 | import VueLazyload from 'vue-lazyload'; Vue.use(VueLazyload, { loading: 'static/loading-svg/loading-bars.svg', try: 3 // default 1 }); |
引入 vue-infinite-scroll
需要在 main.js 中写入以下内容:
1 | import 'font-awesome/css/font-awesome.css'; |
引入 font-awesome
需要在 main.js 中写入以下内容:
1 2 3 | import NProgress from 'nprogress'; import 'nprogress/nprogress.css'; Vue.prototype.$pcNProgress = NProgress; |
引入 vue-awesome-swiper
需要在 main.js 中写入以下内容:
1 2 | import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.use(VueAwesomeSwiper); |
引入 mixins
需要在 src mkdir mixins main.js 中写入以下内容:
1 2 | import Mixin from './mixins'; Vue.mixin(Mixin); |
引入 vueBus
需要在 mkdir src/vueBus.js
1 2 | import Vue from 'vue'; export default new Vue(); |
然后在main.js 中写入以下内容:
1 2 | import Bus from 'src/vueBus'; Vue.prototype.$pcBus = Bus; |
引入 全局过滤器 filters
需要在 mkdir src/filters main.js 中写入以下内容:
1 2 | import filters from './filters'; Object.keys(filters).forEach(k => Vue.filter(k, filters[k])); |
引入 NProgress
需要在 main.js 中写入以下内容:
1 2 3 | import NProgress from 'nprogress'; import 'nprogress/nprogress.css'; Vue.prototype.$pcNProgress = NProgress; |