Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星，足以说明其以悄然成为主流。16年10月Vue发布了2.x版本，经过了一段时间的摸索和看官方的教程和api，才了解到2.0版本在1.0版本的基础上做了好多调整，废弃了好多api。
本文将详细介绍关于利用webpack搭一个vue脚手架的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。
一.适用人群
1.对webpack知识有一定了解但不熟悉的同学.
2.女同学！！！(233333....)
二.目的
在自己对webpack有进一步了解的同时,也希望能帮到一些刚接触webpack的同学.
脚手架已放上github,不想听我啰嗦的同学可以直接去download或clone下来看哦.
脚手架里都有详细注释！
源码：https://github.com/webfansplz/xc-cli.git （本地下载）
觉得有帮助到你的同学给个star哈,也算是对我的一种支持！
三.脚手架结构
├── build 构建服务和webpack配置 |—— build.js webpack打包服务 |—— webpack.base.conf.js webpack基本通用配置 |—— webpack.dev.conf.js webpack开发环境配置 |—— webpack.prod.conf.js webpack生产环境配置 ├── config 构建项目不同环境的配置 ├── public 项目打包文件存放目录 ├── index.html 项目入口文件 ├── package.json 项目配置文件 ├── static 静态资源 ├── .babelrc babel配置文件 ├── .gitignore git忽略文件 ├── postcss.config.js postcss配置文件 ├── src 项目目录 |—— page 页面组件目录 |—— router vue路由配置 |—— store vuex配置 |—— App.vue vue实例入口 |—— main.js 项目构建入口
四.配置npm scripts
4.1 生成package.json文件,配置npm scripts.
4.1.1 使用 npm init 命令,生成一个package.json文件!
npm init
4.1.2 全局安装webpack和webpack-dev-server
npm install webpack webpack-dev-server -g
4.1.3 在项目目录下安装webpack和webpack-dev-server
npm install webpack webpack-dev-server -D
4.1.4 进入package.json配置npm scripts命令
"scripts": {
"dev": "webpack-dev-server --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
}
通过配置以上命令：
我们可以通过npm start/npm run dev在本地进行开发,
scripts.dev命令解读:
通过webpack-dev-server命令 启动build文件夹下webpack.dev.conf.js。