使用 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 低好多..[泪奔惹!]