使用 VueJS 全家桶做一个简单的 SPA 应用

Posted 2021-05-01 SegmentFault

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用 VueJS 全家桶做一个简单的 SPA 应用相关的知识，希望对你有一定的参考价值。

最近公司不太忙..就想看点新东西。因为是个英语渣，就看得懂 VueJS 的文档，决定撸一个 VueJS 的单页面应用出来。

最近 Vue 越来越火了，知乎上到微博上，越来越多的人在用它。之前有学过一点 NG1 ，相比 NG1，VUE 的 API 十分简单。再通过使用 Vue 全家桶，可以进行更高效的开发。以下是本人使用 Vue 全家桶(VueJS + VueRouter + Vuex + Webpack) 撸出来 SPA 的一些过程。使用的是「豆瓣的公共 API」。

安装 Webpack

既然要用全家桶，那么就需要先使用 Webpack，Webpack 是一个非常方便工具，能根据配置文件自动地进行 JS 文件的打包。

首先我们需要安装 Node.js。然后使用 NodeJS 里的 npm (NodeJSPackageManager) 进行包的安装和管理。

安装完毕之后，打开 cmd ，在项目文件夹内运行 $ npm init ，之后会有一大串要你填的信息，直接回车到底就行了。

完成之后，这时项目文件夹中出现了一个 package.json 的文件。

做好了前期的准备工作，我们现在开始正式安装 webpack，在命令行中输入 $ npm i webpack -g，-g 表示 webpack 将会是全局安装，如果发现安装速度慢或甚至无法安装可以使用cnpm或者每次安装时都切换淘宝镜像，在-g后添加--registry=http://registry.npm.taobao.org，下同。

等待安装结束，我们可以开始写 webpack 的配置文件了。在项目文件夹的根目录创建一个名叫 webpack.config.js 的文件。然后我们再创建一些文件，使文件结构像这样:

index.js

webpack.config.js
package.json
index.html

现在，我们先开始配置 webpack 的入口文件和出口。

代码如下:

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。

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

【以往热门文章推荐】