使用 VueJS 全家桶作一個簡單的 SPA 應用

時間 2020-01-04

原文原文鏈接

最近公司不太忙... 就想看點新東西.. 由於是個英語渣, 就看得懂 VueJS 的文檔, 決定擼一個 VueJS 的單頁面應用出來.
最近 Vue 愈來愈火了, 知乎上到微博上, 愈來愈多的人在用它. 以前有學過一點 NG1 , 相比 NG1, VUE 的 API 十分簡單.再經過使用 Vue 全家桶, 能夠進行更高效的開發. 如下是本人使用 Vue 全家桶(VueJS + VueRouter + Vuex + Webpack) 擼出來 SPA 的一些過程. 使用的是豆瓣的公共 API.css

安裝 Webpack

既然要用全家桶, 那麼就須要先使用 Webpack, Webpack 是一個很是方便工具, 能根據配置文件自動地進行 JS 文件的打包.
首先咱們須要安裝 Node.js. 而後使用 NodeJS 裏的 npm (NodeJSPackageManager) 進行包的安裝和管理.
安裝完畢以後, 打開 cmd , 在項目文件夾內運行 $ npm init , 以後會有一大串要你填的信息, 直接回車到底就好了.
完成以後, 這時項目文件夾中出現了一個 package.json 的文件.html

作好了前期的準備工做, 咱們如今開始正式安裝 webpack, 在命令行中輸入 $ npm i webpack -g, -g 表示 webpack 將會是全局安裝, 若是發現安裝速度慢或甚至沒法安裝可使用cnpm或者每次安裝時都切換淘寶鏡像, 在-g後添加--registry=http://registry.npm.taobao.org, 下同.vue

等待安裝結束, 咱們能夠開始寫 webpack 的配置文件了. 在項目文件夾的根目錄建立一個名叫 webpack.config.js 的文件.
而後咱們再建立一些文件, 使文件結構像這樣:node

appwebpack
- index.jsweb
webpack.config.jsvue-router
package.jsonvuex
index.htmlnpm

如今, 咱們先開始配置 webpack 的入口文件和出口.
代碼以下:json

module.exports = {
    entry: './app',
    output: {
        path: './build/,
        filename: 'bundle.js'
    }
};

index.html:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<script src="./build/bundle.js"></script>
</body>
</html>

接下來,

index.js:
    
var h2 = document.createElement('h2');
h2.innerHTMl = 'HELLO VUEJS';
document.body.appendChild(h2);

直接在 cmd 中運行 webpack ,就能看到頁面顯示了一個h2標籤,內容是 HELLO VUEJS.

安裝 Webpack-dev-server

能夠打包以後咱們可讓 webpack 運行一個本身的服務器, 而且能在咱們文件更新以後, 讓其自動刷新
繼續使用 cmd , 輸入指令 npm i webpack-dev-server --save-dev. --save-dev會講安裝後的包放在package.json 的devDependencies,一個放在dependencies裏面, 產品模式用dependencies，開發模式用devDep.

安裝完成以後, 繼續往 webpack.config.js 中添加配置.

devServe: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true
}

再向 package.json 中"script"添加配置

"script": {
    "start": "webpack-dev-server --hot --inline"
}

.json 格式的文件裏不管鍵名仍是值都必須使用雙引號.

寫好以後在cmd 中輸入 npm run start 跑出一串字以後, 打開 localhost:8080, 就能看到結果, 而後咱們隨意修改一下文本的內容保存一下, 會發現瀏覽器內的文字自動地刷新了. MAGIC

如何寫 CSS

如今能改動結構了, 可是有告終構就改想一想 css 的問題了.
webpack 是把一個文件看做一個模塊, 咱們須要使用專門的 webpack loader來處理各式文件.
處理 css 文件時, 咱們須要 2個loader, 一個 style-loader 和 css-loader, 先來安裝這兩個loader,
輸入 $ npm i css-loader style-loader --save-dev.
安裝完畢後, 咱們再來配置webpack.config.js,

module: {
    loaders: [
        {
            test: /.css$/, //匹配到全部的css文件
            loader: 'style!css', //有多種寫法, 這是字符串式的寫法, style-loader 等loader 能夠省去loader 直接寫 loader名,
            loaders: ['style', 'css'], //數組寫法, 注意要使用loaders!, loader 的執行順序是從右到左, 也就是先用css-loader 再使用 style-loader
        }
    ]
}

固然, 咱們也可使用 less sass stylus 等其餘的 css 預處理器, 只須要在安裝相應的loader, 這裏我以 less-loader 爲例, 由於 windows 的 SASS 會教你作人. 上一家公司由於電腦沒有安裝 visual studio 而搞了幾天....
安裝 less-loader, 輸入 $ npm i less-loader --save-dev, 等待安裝結束後, 檢查一下安裝的依賴中是否有以前沒安裝過的, 要繼續安裝.(這個問題也許是以前我沒有安裝其餘模塊的依賴. less-loader 依賴 less).

這裏咱們把剛纔的 module.loaders 改一下

module: {
    loaders: [
        {
            test: /.less$/, //匹配全部以 .less 結尾的全部文件
            loader: 'style!css!less', //用 less-loader 來處理文件, 要先於 css-loader 處理以前處理 less
            loaders: ['style', 'css', 'less'],
        }
    ]
}

這樣,咱們也可使用 less 了.
在 index.js 中以 AMD 方式引入 require('main.less');. 這樣就能愉快書寫 less 了.

如何使用 `EcmaScript 2015`

ES6 已是2016年以後的趨勢了, VueJS 全家桶裏的不少例子都是由 ES6 寫成的. 是時候使用 EcmaScript 2015 了!
首先咱們須要安裝 babel-loader 以及 babel:
在命令行內輸入

$ npm install --save-dev babel-preset-env

安裝babel, 以及

$ npm i --save-dev babel-loader

安裝babel-loader
安裝以後更改 webpack.config.js 裏的module.loaders

...,
{
    test: /.js$/,
    loader: 'babel-loader'
}

babel 要求一個預製值, 能夠在

...,
{
    test: /.js$/,
    loader: 'babel-loader',
    query: {
        presets: ['es2015']
    }
}

不過這樣寫, 在.vue 文件中的 JS 將沒法被處理.
這時咱們應該直接寫到

module: ...,
babel: {
    presets: ['es2015']
}

[1, 2, 3].forEach( (that) => console.log(that) );

看看轉換的結果吧

安裝 VueJS, 使用 vue-loader, 單文件組件

搞了這麼久, Vue 的 V 字都沒開始寫.
如今開始安裝 Vuejs

$ npm i vue

而且在 index.js 裏引入 Vue

import Vue from 'vue';

安裝 vue-loader, 這樣咱們就可以使用 .vue 直接建立單文件組件了.

而且須要在 webpack.config.js 里加入

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js'
    }
}

寫起來吧!

引入單文件組件:

import MainView from './components/Mainview.vue';

如何直接用組件渲染到 el: #app 上?
使用

new Vue({
    render (h) {
        h(MainView); //將 MainView 渲染
    }
}).$mount('#app'); //將渲染到 #app, 將會替換 #app

使用 Vue-router

`$ npm install vue-router`

若是自己應用頁面不少的話, 能夠將路由文件單獨獨立出來成一個文件.

首先在 router.js 引入

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

咱們繼續來定義路由:

const router = new VueRouter({
    routes: [
        {
            path: '/',
            component: HeaderVue //當只有一個Vue 沒有其餘命名路由時使用
            components: { //當有其餘命名路由時使用, 注意s!
                nameA: HeaderVue,
                nameB: HelloVue,
                default: ContentVue
            }
        }
    ]
});

最後咱們將這個參數用 module.export = router; 傳遞到 index.js.

這裏還有一個問題: 若是單獨在一個頁面裏定義路由, 裏面的 components 改如何寫呢, 相對地址會很差寫.
這裏 node 提供了個函數 require(['./components/Content.vue'], resolve) 就能直接寫了.

component: require(['./components/Content.vue'], resolve);

使用 Vuex

$ npm i vuex

Vuex 是 Vue 的狀態管理工具.

import Vuex from 'vuex';

const store = new Vuex.Store({
    state: ..., //狀態
    mutations: ..., //同步的改變狀態, 請調用 mutation 來改變狀態,而不是經過修改state
    actions: ... //異步改變狀態
});

其餘具體事項就看 API 好了. 學習難度比 NG1 低好多..[淚奔惹!]