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