从零开始配置vue+webpack项目

2018年2月23日21:36:36 2 1,261

学习完Vue的基本语法之后,如果你想构建一个Vue项目,就一定要学习Vue+webpack配置一个Vue工程,虽然有vue-cli脚手架可以让快速构建一个项目,直接写vue代码就行了,但是这是先甜后苦的做法,我们今天是学习先苦后甜的方法从零开始配置vue+webpack项目。

1、初始化项目

首先我们需要创建一个项目文件夹,下图的项目文件夹是test,我使用的是vscode编辑器,因为它自带了命令行,更方便一些。
从零开始配置vue+webpack项目
切换到项目文件夹,使用命令:npm init初始化一个npm项目,生成一个package.json,会出现一些选项,默认回车就好了。如果你没有安装npm和node.js,请自行百度一下教程。

2、安装相关依赖包

我们这个测试的项目主要是使用的vue/vue-loader和webpack,所以我们使用下面命令安装它们:
npm i webpack vue vue-loader

安装vue-loader可以会出现错误,因为它需要css-loadervue-template-compiler两个依赖,接着我们使用下面命令安装这两个依赖:
npm i css-loader vue-template-compiler

这样项目初始化就成功了。

3、新建文件

在test目录下创建一个文件夹叫做src,基本上所有的操作都是在这个里面进行的。

新建文件app.vue

一个vue组件,这个组件里面的内容有template/scriptstyle这些。

新建文件webpack.config.js

webpack.config.js这个文件是帮我们打包前端资源,图片,字体,文件等。

新建文件index.js

这个index.js是入口文件

package.jsonscripts中添加代码指定config文件为webpack.config.js:
"build": "webpack --config webpack.config.js"

最后通过命令跑一下这个项目:
npm run build

在webpack.config.jsmodule.exports中添加下面代码使用webpack支持.vue文件:

4、加载资源

加载前端所有能用到的资源,比如图片,或者css预处理器,同时像上面支持.vue文件一样,在rules中加入:

加载css

加载图片

安装上面用到的loader

npm i style-loader url-loader file-loader

跑起来:
npm run build

未完待续...

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  2   博主  0

    • avatar ezpod 来自天朝的朋友 谷歌浏览器 Windows 7 0

      推荐一个vue工程化实践教程:http://xc.hubwiz.com/course/598bad66c7fd1d49453979c9?affid=zcb7878

      • avatar 夜游 来自天朝的朋友 谷歌浏览器 Windows 7 0

        1好