详解webpack + vue + node 打造单页面(入门篇)


Posted in Javascript onSeptember 23, 2017

1.node下载地址:http://nodejs.cn/download/,安装完成检查node和npm版本

详解webpack + vue + node 打造单页面(入门篇)

2.淘宝镜像 : npm install cnpm -g --registry=https://registry.npm.taobao.org ,淘宝镜像比npm要快很多,可以直接用cnpm代替npm

详解webpack + vue + node 打造单页面(入门篇)

3.安装vue-cli:cnpm install -g vue-cli

安装webpack:cnpm install -g webpack

-g 表示全局安装

编程过程中需要引入模块的话可以cnpm install <module> --save

比如需要安装vue-router路由模块直接用脚手架cnpm install vue-router--save 就可以了

详解webpack + vue + node 打造单页面(入门篇)

详解webpack + vue + node 打造单页面(入门篇)

4.构建webpack的vue应用:vue init webpack <filename>

详解webpack + vue + node 打造单页面(入门篇)

在这里特别提一下 webpack,前面在安装 webpack 模板时,有一个选择项,是否使用 ESLint 来规范你的代码,

ESLint 对于平时不太注意代码缩进的朋友可能是一个噩耗,稍微修改下程序代码,如果缩进不符规范,甚至空格都有可能一堆操蛋的报错

注明下vue-cli 的模板,vue-cli 模板分为 官方模板、自定义模板、本地模板

官方模板分为

  •  browserify  --  拥有高级功能的 Browserify + vueify 用于 正式开发
  •  browserify-simple  --  拥有基础功能的 Browserify + vueify 用于 快速开发
  •  simple  --  单个 HTML,用于开发最简单的 Vue.js 应用
  •  webpack  --  拥有高级功能的 Webpack + vue-loader 用于正式开发
  •  webpack-simple  --  拥有基础功能的 Webpack + vue-loader 用于快速开发

5.脚手架安装依赖

详解webpack + vue + node 打造单页面(入门篇)

6.直接运行看效果

详解webpack + vue + node 打造单页面(入门篇)

详解webpack + vue + node 打造单页面(入门篇)

PS:自己写了一个demo 结合了路由、路由嵌套、子路由、远程跨域获取数据,bootstrap等功能

代码已经上传到我的github,地址:https://github.com/LeonardLmyt/learngit/tree/master/vue-single-page

详解webpack + vue + node 打造单页面(入门篇)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
基于jQuery实现的菜单切换效果
Oct 16 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 Javascript
如何基于js判断浏览器版本
Feb 20 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
JavaScript定义函数的三种实现方法
Sep 23 #Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 #Javascript
详细介绍RxJS在Angular中的应用
Sep 23 #Javascript
Javascript刷新页面的实例
Sep 23 #Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 #Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 #jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 #jQuery
You might like
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
七款最流行的PHP本地服务器分享
2013/02/19 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
javascript中this关键字详解
2016/12/12 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
python实现决策树分类(2)
2018/08/30 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
高中毕业生个人自我鉴定
2013/11/24 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
离婚协议书格式
2015/01/26 职场文书
委托书格式范文
2015/01/28 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
javascript函数式编程基础
2021/09/15 Javascript
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技