上一节我们搭建了Webpack4的环境从零开始配置Vue2.x-Webpack4开发环境(一)

这一节我们就添加模块Vue,如果你对Vue还不了解&＃xff0c;可以先去看看Vue的官方网站(https://cn.vuejs.org/)

安装依赖包

cnpm i vue vue-loader -D 或yarn add vue vue-loader -D

注&＃xff1a;我们这里都用npm的方式安装&＃xff0c;就不用直接引用vue.js的方式了。

下面是我没有执行上面的命令的目录和package.json的内容&＃xff1a;

没有配置Vue模块前的内容

执行完上面的命令以后的内容&＃xff1a;

安装完vue和vue-loader的package.json

这样可以看到package.json的变化。

添加Vue文件

在src下面创建一个App.vue文件&＃xff0c;这个名字可以随便起&＃xff0c;只要在引用的时候包含这个文件就可以了。

$touch src/App.vue

注&＃xff1a;小编执行此命令的目录是工程的根目录&＃xff0c;即&＃xff1a;vue-webpack

App.vue里面的内容&＃xff1a;

{{msg}}

添加Vue文件

这个文件里面的内容什么意思这里就不说了&＃xff0c;如果有不清楚的可以看一下官网(https://cn.vuejs.org/)

引用Vue文件

既然已经把Vue文件建好了&＃xff0c;那我们就需要能够像java,c&＃43;&＃43;那边引用进来才可以&＃xff0c;不然就没法执行

这个时候我们就要修改我们的src/index.js&＃xff0c;因为这个是webpack编译能够执行的文件(你可以理解为一个入口文件)&＃xff0c;具体内容是&＃xff1a;

import Vue from &＃39;vue&＃39;import App from &＃39;./App.vue&＃39;new Vue({ el: "#root", render:h&＃61;>h(App)})

index.js文件的修改

编译Vue文件

现在来编译一下我们的Vue文件&＃xff1a;

yarn build

很不幸会出现以下的错误&＃xff1a;

编译Vue文件

ERROR in ./src/App.vue 1:0Module parse failed: Unexpected token (1:0)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

这个的主要意思就是说&＃xff1a;App.vue这种文件类型没有合适的loader(解释器)&＃xff0c;现在你可能有一个疑问&＃xff0c;我明明安装了vue-loader,为什么会报这个错呢&＃xff1f;原因很简单&＃xff0c;虽然安装了&＃xff0c;但是打包的是webpack&＃xff0c;webpack却不知道.vue文件是什么东西&＃xff0c;你必须需要告诉webpack,Vue文件需要用什么解释器来解析或者编译。

配置webpack的vue-loader

在从零开始配置Vue2.x-Webpack4开发环境(一)这篇文章里面我们已经会用webpack打包&＃xff0c;并且没有任何配置&＃xff0c;如果有心的同学肯定会问&＃xff0c;问什么根目录下要创建一个src,问什么src下面要创建一个index.js&＃xff0c;这个是webpack的默认配置&＃xff0c;那么我们能不能改呢&＃xff1f;答案肯定是能得&＃xff0c;很简单&＃xff0c;只需要在项目的根目录下新建一个webpack.config.js,然后进行配置就可以了。

const VueLoaderPlugin &＃61; require(&＃39;vue-loader/lib/plugin&＃39;)module.exports &＃61; { mode: "development", entry: &＃39;./src/index.js&＃39;, output: { path: __dirname &＃43; &＃39;/dist&＃39;, publicPath: &＃39;/static/&＃39;, filename: &＃39;main.js&＃39; }, module: { rules: [{ test: /.vue$/, use: ["vue-loader"] }] }, plugins: [ new VueLoaderPlugin() ]}

webpack配置文件

配置完以后继续来执行

yarn build

出现下面的错误

这个错误的关键点是这句话&＃xff1a;

[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.

vue-loader是的编译实现必须需要依赖vue-template-compiler(大概就是这个意思&＃xff0c;可能翻译的不正确)

安装依赖包

yarn add vue-template-compiler -D 或者cnpm i vue-template-compiler -D

安装vue-template-compiler

接着编译:

yarn build或npm run build

注:用yarn命令执行的时候可以不用run,直接yarn&＃43;package.json里面script字段的那个命令就可以了。

编译结果

这里如果你对安装了vue-template-compiler&＃xff0c;但是没有配置webpack,这里是因为vue-template-compiler是vue-loader的依赖&＃xff0c;vue-loader会去调用vue-template-compiler&＃xff0c;而vue文件只需要vue-loader来解析&＃xff0c;说这个的原因是让同学们以后再配置其他的插件是知道配置哪一个插件而不是盲目什么什么都往webpack配置文件里面写。

运行编译后的Vue文件

这里来说一下Vue文件编译完以后肯定是变成了js代码&＃xff0c;都输出到dist/main.js里面了&＃xff0c;为什么呢&＃xff1f;因为我们的浏览器只认html,css标签和js代码&＃xff0c;这个是必须的&＃xff0c;不管现在出现了什么编译器&＃xff0c;css的编译器(less,sass&＃xff0c;stylus)最后生成的肯定是CSS文件&＃xff0c;还有就是最近比较火的typescript语言生成JS代码&＃xff0c;这个原理搞清楚了&＃xff0c;什么乱七八糟的插件编译器都很好理解&＃xff0c;OK&＃xff0c;运行以下&＃xff0c;小编还是用vscode的插件live-server来启动我们的html

运行结果&＃xff1a;

Vue文件解析成功。

到此位置webpack4和vue的结合最基本的配置已经完了&＃xff0c;可以做简单的前端开发了&＃xff0c;后面会继续的写一些常用的其他插件的配置&＃xff0c;欢迎大家评论和留言&＃xff0c;交流各种IT技术。