详解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 对象的解释
Nov 24 Javascript
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
详解vue axios中文文档
Sep 12 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 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
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
JavaScript事件列表解说
2006/12/22 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
Python中List.count()方法的使用教程
2015/05/20 Python
Python 函数基础知识汇总
2018/03/09 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
介绍一下Python下range()函数的用法
2013/11/07 面试题
2014年医院科室工作总结
2014/12/20 职场文书
小学教师工作总结2015
2015/04/07 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android
在Docker容器中部署SQL Server
2022/04/11 Servers