從零開始搭建vue.js項目

搭建項目

初始化項目

$ npm install --global vue-cli
# 建立一個基于 webpack 模闆的新項目
$ vue init webpack paascloud-paas-web
# 安裝依賴，走你
$ cd paascloud-paas-web
$ npm install
$ npm run dev           

添加各種需要依賴的元件

λ 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

$  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           

安裝項目所需依賴

$ 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

'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')           

啟動項目

$ npm run dev
通路 http://localhost:8080/ 看見久違的Hello World 項目第一步 搭建成功           

內建所需插件

引入 Element

完整引入

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：

$ npm install babel-plugin-component -D           

然後，将 .babelrc 修改為

"plugins": [["component", [
    {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-default"
    }
]], "transform-runtime"],           

接下來，如果你隻希望引入部分元件，比如 Button 和 Select，那麼需要在 main.js 中寫入以下内容：

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 中寫入以下内容：

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

import Hello from '@/components/Hello';
export default [
  {
    path: '/',
    name: 'Hello',
    component: Hello
  }
];
           

引入 axios

這裡寫代碼片           

引入 NProgress

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
Vue.prototype.$pcNProgress = NProgress;           

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 中寫入以下内容：

import Vuex from 'vuex';
import store from './store/';
Vue.use(Vuex);
new Vue({
    el: '#app',
    router,
    store,
    template: '<App/>',
    components: {App}
});           

引入 vue-lazyload

import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {
    loading: 'static/loading-svg/loading-bars.svg',
    try: 3 // default 1
});           

引入 vue-infinite-scroll

import 'font-awesome/css/font-awesome.css';           

引入 font-awesome

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
Vue.prototype.$pcNProgress = NProgress;           

引入 vue-awesome-swiper

import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper);           

引入 mixins

需要在 src mkdir mixins main.js 中寫入以下内容：

import Mixin from './mixins';
Vue.mixin(Mixin);           

引入 vueBus

需要在 mkdir src/vueBus.js

import Vue from 'vue';
export default new Vue();           

然後在main.js 中寫入以下内容：

import Bus from 'src/vueBus';
Vue.prototype.$pcBus = Bus;           

引入 全局過濾器 filters

需要在 mkdir src/filters main.js 中寫入以下内容：

import filters from './filters';
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));           

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
Vue.prototype.$pcNProgress = NProgress;