原文地址 http://www.qinshenxue.com/article/20160806114423.html
原文不断修错,补充等,这里更新会滞后一些,建议直接查看原文。欢迎指正错误。
vue 官方提供了快捷构建项目的脚手架工具(vue-cli),只需几个命令就能轻松初始化一个 vue 的 webpack 项目。虽然能够快速开发,但是如果想自己改些配置会有些困难,担心一点改动项目就跑不起来了,也不知道每个参数的作用是啥,正所谓“自己动手丰衣足食”,拿来主义从来都是先甜后苦,因此还是觉得该自己一步一步配置出来一个。自己动手意味着你要去了解每个模块的作用以及模块之间如何组合,如何配置,过程可能痛苦,但是在后期碰到一些问题的时候,你会发现花费的时间比想象中的少了。
初始化
新建项目目录 vue-practice,npm init
初始化package.json
从目标分析,以下模块肯定少不了。
. vue,用的 vue 版本是1.0.26
. vue-router,vue 路由插件
. vue-loader,vue 组件(*.vue文件)webpack 模块加载器
. webpack,模块加载器兼打包工具
. webpack-dev-server,轻量的 node.js express 服务器,用于开发调试用
将上面模块加到 package.json 中,查看某个模块的版本号执行npm view 模块名 version
。
"devDependencies": {
"vue": "^1.0.26",
"vue-loader": "^8.5.3",
"vue-router": "^0.7.13",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
新建目录及文件,结果如下:
vue-pratice
|-- package.json
|-- index.html // 启动页面
|-- webpack.config.js // webpack配置文件
|-- src
|-- components // vue组件目录
|-- views // vue页面
|-- main.js // 入口文件
|-- router.js // vue-router配置
|-- app.vue // 项目首页组件