在 webpack 中配置 vue 的过程？

🎉 引入 vue.js?

后续项目中，我们会使用 Vuejs 进行开发，而且会以特殊的文件来组织 vue 的组件。

所以，下面我们来学习一下如何在我们的 webpack 环境中集成 Vuejs。

现在，我们希望在项目中使用 Vuejs，那么必然需要对其有依赖，所以需要先进行安装。

注：因为我们后续是在实际项目中也会使用 vue 的，所以并不是开发时依赖-D 而是生产依赖-S。

因此安装命令为：

1
$cnpm vue -D

安装完成后可使用命令引入并使用 vuejs：

1
2
3
4
5
6
7
import Vue from "vue";
const app = new Vue({
  el: "#app",
  data: {
    message: "hello!",
  },
});

runtime-only 和 runtime-compiler 存在区别。

runtime-only 不能包含 temple，但 new vue 的时候创建了默认的 temple。因此我们需要切换到 runtime-compiler。切换方法修改 webpack.config.js 为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//webpack.config.js
const { resolve } = require("path");
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: resolve(__dirname, "dist"),
  },
  resolve: {
    //这里是声明别名
    alias: {
      //这里指定使用的版本
      vue$: "vue/dist/vue.esm.js",
    },
  },
};

在 webpack 中使用 vue？

🎉el 和 template？

如果我们希望将 data 中的数据显示在界面中，就必须是修改 index.html。

如果我们后面自定义了组件，也必须修改 index.html 来使用组件

但是 html 模板在之后的开发中，我并不希望手动的来频繁修改，是否可以做到呢？

定义 template 属性：

在前面的 Vue 实例中，我们定义了 el 属性，用于和 index.html 中的#app 进行绑定，让 Vue 实例之后可以管理它其中的内容。

这里，我们可以将 div 元素中的内容删掉，只保留一个基本的 id 为 div 的元素。

但是如果我依然希望在其中显示的内容，应该怎么处理呢？

我们可以再定义一个 template 属性，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
new Vue({
  el: "#app",
  template: `
            <div>
                <p>{{message}}</p>
                <p>{{age}}</p>
                <p>{{name}}</p>
            </div>
        `,
  data: {
    message: "hello!",
    age: 17,
    name: "zfe",
  },
});

.vue 文件的封装？

将原有的 js 中的 template 模板中的内容进行抽离。

抽离的结果。

1
2
3
4
5
6
7
8
import Vue from "vue";
import App from "./vue/app.vue";

new Vue({
  el: "#app",
  template: `<App/>`,
  components: { App },
});

通过.vue 文件分成三部分书写：template、script、style，结构变得非常清晰。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!--这里放模板-->
<template>
    <div>
        <p>{{message}}</p>
        <p>{{age}}</p>
        <p>{{add(1,2)}}</p>
        <p>{{name}}</p>
        <Cpn>
    </div>
</template>
<!--这里放脚本-->
<script>
//这里可以引入其他.vue文件
import Cpn from './Cpn.vue';
    export default {
        name: "app",
        components:{Cpn},
        data() {
           return {
                message: 'hello!',
                    age: 17,
                name: 'zfe'
           }
        },
        methods:{
            add(a,b){
            return a + b
            }
        }
    }
</script>
<!--这里放样式-->
<style scoped>
  p{
    color:blue;
  }
</style>

需要事先安装依赖。

1
$cnpm vue-loader vue-template-compiler vue-loader-plugin -D

在 index.js 中引入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const { resolve } = require("path");
//引入vue-loader-plugin
const VueLoaderPlugin = require("vue-loader-plugin");
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        //使用vue-loader加载.vue文件
        test: /\.vue$/,
        use: ["vue-loader"],
      },
    ],
  },
  plugins: [
    //使用vue-loader-plugin
    new VueLoaderPlugin(),
  ],
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js",
    },
  },
};

ps:后缀名的省略方法

1
2
3
resolve: {
extensions:['.js','.vue'],
}

给代码加上版权声明？

🎉 实现方法？

导入

1
const webpack = require("webpack");

使用插件

1
2
3
4
plugins: [
  //使用webpack.BannerPlugin
  new webpack.BannerPlugin("最终版权由冰卡诺所有"),
];

将代码合并实现不同配置？

🎉 实现方法？

安装

1
$cnpm webpack-merge -D

导入

1
2
3
4
5
const WebpackMerge = require('webpack-merge');
//导入公共参数
const BaseConfig = require('./base.config.js');
//合并参数
module.exports = WebpackMerge(BaseConfig,{...})

设置 package.json

1
2
3
4
//生产环境webpack打包指令
"build":"webpack --config 生产环境的config文件目录"
//开发环境webpack打包指令
"build":"webpack --config 开发环境的config文件目录"

什么是 vue-cli？

🎉 什么是脚手架？

如果你只是简单写几个 Vue 的 Demo 程序, 那么你不需要 Vue CLI。

如果你在开发大型项目, 那么你需要, 并且必然需要使用 Vue CLI。

使用 Vue.js 开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。

如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

🎉CLI 是什么意思?

CLI 是 Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。

Vue CLI 是一个官方发布 vue.js 项目脚手架。

使用 vue-cli 可以快速搭建 Vue 开发环境以及对应的 webpack 配置。

🎉 依赖?

依赖 node 和 webpack。

vue-cli2.0 的安装与使用？

🎉 安装?

由于目前元 vue-cli 插件已经更名为@vue/cli 所以为了使用旧版，需要额外安装一个依赖。

1
$cnpm i  @vue/cli-init

使用以下命令拉取 vue-cli2.0 模板

1
$vue init webpack my-project

回车后开始选择配置项

1
2
3
4
5
6
7
8
9
$？Project name //项目名称不能包含大写
$？Project description  //项目的描述信息
$？Author //作者信息，默认从git中获取
$？Vue build //选择构建的模式 runtime-only或runtime-compiler
$？Install vue-router？  //是否安装路由
$？Use ESLint to lint your code？//是否检测代码规范
$？Set up unit tests //是否写单元测试
$？Set e2e tests with Nightwatch？//是否进行e2e测试
$？Should we run `npm install` for you after the project has been created? (recommended) //选择node管理器

目录结构

🎉 使用?

1
2
3
4
 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"