从零搭建vue工程(vue-router,webpack)

本文介绍了如何从零开始手动搭建一个包含vue、vue-router和webpack的项目。通过新建项目目录,初始化package.json,安装必要的依赖,配置webpack和webpack-dev-server,设置vue-router,以及处理样式和组件开发。最后,文章强调了虽然快速启动工具方便,但手动配置有助于理解每个模块的工作原理。
摘要由CSDN通过智能技术生成

原文地址 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     // 项目首页组件
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值