vue+webpack的项目完整配置教程(一)

这是一篇有关webpack手动配置的教程。

vue+webpack的项目完整配置教程

开始（确认已经安装node环境和npm包管理工具）

开始

• 新建项目文件名为vuedemo

• npm init -y 初始化项目

初始化

安装项目依赖

• npm install --save vue 默认安装最新版vue

• npm install --save-dev webpack webpack-dev-server 安装webpack，webpack-dev-server（是一个小型的Node.js Express服务器）

拓展：npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件，一个是npm install --save另一个是 npm install --save-dev，他们表面上的区别是--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下，--save-dev 是你开发时候依赖的东西，--save 是你发布之后还依赖的东西。

install

• npm install --save-dev babel-core babel-loader babel-preset-es2015 安装babel，babel的作用是将es6的语法编译成浏览器认识的语法es5

install

`

• npm install --save-dev vue-loader vue-template-compiler 用来解析vue的组件，.vue后缀的文件

• npm install --save-dev css-loader style-loader 用来解析css

拓展：css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

• npm install --save-dev url-loader file-loader 用于打包文件和图片

• npm install --save-dev sass-loader node-sass 用于编译sass

• npm install --save-dev vue-router 安装路由

编辑项目目录以及添加代码

文件目录如下:

list

目录结构说明

1. dist文件是后面执行webpack指令生产的，不用管；

2. webpack.config.js 配置文件，本身也是一个标准的Commonjs规范的模块；

3. routes.js文件放路由配置文件；

4. index.html首页入口文件

5. App.vue是项目入口文件。

6. main.js这是项目的核心文件。全局的配置都在这个文件里面配置。

7. commponents目录里面放了公共组件header文件。

8. views文件放详情页面；

---

原创文章首发于简书，转载请注明出处：
来源：简书，作者：观奇笔记；原文地址：https://www.jianshu.com/p/2e9a060e547f，
欢迎关注我的github