6.vwe开发之引入vue

在前面我们已经成功的创建了一个基于webpack + express的开发环境，但是对于实际开发，这还是不够的，为了方便前端
开发，我们引入了时下最流行的vue.js

vue.js官网

什么是vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

如果你知道angular或者是react的话，那么你对vue的理解会更容易些，一个提高前端开发的渐进式框架，可以摆脱传统的复杂的js和html操作。

让项目支持vue

为了方便开发，我们先把目录改成如下：

│  .babelrc
│  .eslintrc.js
│  .gitignore
│  info.txt
│  package-lock.json
│  package.json
│  readme.md
│  webpack.dev.config.js
│  webpack.prod.config.js
│  webpack.server.config.js
└─src
    │  App.vue
    │  index.js
    │
    ├─components
    │      blog-add.vue
    │      blog-list.vue
    │      blog-view.vue
    │      Navigator.vue
    │      test.md
    │
    ├─css
    │      style.css
    │
    ├─ex-router
    │      ex-router.js
    │
    ├─html
    │      index.html
    │
    ├─img
    │      cat.jpg
    │
    ├─js
    │      apiService.js
    │      index.js
    │      logger.js
    │
    ├─router
    │      index.js
    │
    └─server
            server-dev.js
            server-prod.js

我们在./src下新建了了一个叫App.vue和components的文件夹,他们的作用分别是：

1. App.vue – vue的总的页面结构
2. components – vue的组件(这个当前是可以忽略的）

目的：我们让index.html中能显示app.vue中的信息

我们知道：webpack是通过config中rule中的插件来解析各种文件，如js,css等文件，我们相信webpack通过某种插件来解析vue文件（是的，我们
通常用.vue来定义一个vue文件）–没错，我们需要vue-loader和一些其他的vue相关的插件来帮助我们进行vue开发

1. 安装vue-loader和vue

npm i --save-dev vue-loader vue

安装后，在app.vue中代码如下：

<template>
    <div>
        <p>hello, this is vue app, you can see me if you an laod me correctly!</p>
    </div>
</template>

<script>
  export default {
    name: "App",
  }
</script>

<style scoped>

</style>

2. 在webpack.dev.config.js中我们需要引入vue-loader，修改后的webpack.dev.config.js代码如下：

/* eslint-disable no-undef */
const path = require('path')
const webpack = require('webpack')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const {VueLoaderPlugin} = require('vue-loader')

module.exports = {
    entry: {
        // main: './src/index.js'
        main: ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
            './src/index.js']
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/',
        filename: '[name].js'
    },
    mode: 'development',
    target: 'web',
    devtool: 'source-map',
    module: {
        rules: [
            {
                enforce: "pre",
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
                options: {
                    emitWarning: true,
                    failOnError: false,
                    failOnWarning: false
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
            },
            {
                // Loads the javacript into html template provided.
                // Entry point is set below in HtmlWebPackPlugin in Plugins
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        //options: { minimize: true }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader']
            },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }
            // ,
            // {
            //     test: /\.styl(us)?$/,
            //     use: [
            //         'vue-style-loader',
            //         'css-loader',
            //         'stylus-loader'
            //     ]
            // }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/html/index.html",
            filename: "./index.html",
            excludeChunks: ['server']
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new VueLoaderPlugin()
    ]
}

执行build命令：

npm run buildDev

这个时候会报错：

ERROR in ./src/App.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementati
on must be passed via options.

这里表示缺少依赖 vue-template-compiler，那么安装这个依赖：

npm i --save-dev vue-template-compiler

然后重新编译

npm run buildDev

这里应该不会抛出异常了，启动服务器

npm run start

在页面中，你可以看到App.vue中的内容

hello, this is vue app, you can see me if you an laod me correctly!

这说明了，项目可以正确的分析vue的组件了，下一步就是如果通过vue来进行页面跳转了。

下一篇：7.vwe开发之支持vue-router