详解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 相关文章推荐
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
让textarea自动调整大小的js代码
Apr 12 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 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实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
JS Array对象入门分析
2008/10/30 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
angular2使用简单介绍
2016/03/01 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
Python判断操作系统类型代码分享
2014/11/22 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
基于Python 函数和方法的区别说明
2021/03/24 Python
学校经典推荐信
2013/10/30 职场文书
毕业生就业自荐书
2013/12/15 职场文书
药店主任岗位责任制
2014/02/10 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
工程售后服务承诺书
2014/05/21 职场文书
岗位职责说明书模板
2014/07/30 职场文书
审美与表现自我评价
2015/03/09 职场文书
冬季作息时间调整通知
2015/04/24 职场文书