從零開始搭建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

需要在 main.js 中寫入以下內容：

這裏寫代碼片

引入 NProgress

需要在 main.js 中寫入以下內容：

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

引入 axios

需要在 main.js 中寫入以下內容：

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

需要在 main.js 中寫入以下內容：

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

引入 vue-infinite-scroll

需要在 main.js 中寫入以下內容：

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

引入 font-awesome

需要在 main.js 中寫入以下內容：

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

引入 vue-awesome-swiper

需要在 main.js 中寫入以下內容：

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

引入 NProgress

需要在 main.js 中寫入以下內容：

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