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

 更新时间:2017年09月23日 11:03:36   作者:两面一汤  
本篇文章主要介绍了详解webpack + vue + node 打造单页面(入门篇) ,非常具有实用价值,需要的朋友可以参考下

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

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

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 就可以了

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

在这里特别提一下 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.脚手架安装依赖

6.直接运行看效果

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

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

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

相关文章

  • vue使用websocket概念及示例

    vue使用websocket概念及示例

    这篇文章主要为大家介绍了vue使用websocket概念及示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Vue2面试考点之$nextTick原理解析

    Vue2面试考点之$nextTick原理解析

    平时在获取真实DOM的时候获取不到最新的DOM元素,使用$nextTick就可以,那为什么$nextTick就可以获取到最新的DOM元素呢,本文就来带着这两个问题来解析一下nextTick的原理
    2023-05-05
  • Vue打包后页面出现空白解决办法

    Vue打包后页面出现空白解决办法

    本文主要介绍了Vue打包后页面出现空白解决办法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 解决vue scoped html样式无效的问题

    解决vue scoped html样式无效的问题

    这篇文章主要介绍了解决vue scoped html样式无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue-cli5搭建vue项目的实现步骤

    vue-cli5搭建vue项目的实现步骤

    本文主要介绍了vue-cli5搭建vue项目的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • vue props 一次传多个值实例

    vue props 一次传多个值实例

    这篇文章主要介绍了vue props 一次传多个值实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue.js计算属性computed用法实例分析

    vue.js计算属性computed用法实例分析

    这篇文章主要介绍了vue.js计算属性computed用法,结合实例形式分析了vue.js使用computed方式进行属性计算的相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • 浅谈关于iview表单验证的问题

    浅谈关于iview表单验证的问题

    这篇文章主要介绍了浅谈关于iview表单验证的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • VUE学习宝典之el-dialog使用示例

    VUE学习宝典之el-dialog使用示例

    在我工作过程中使用el-dialog的需求挺多的,也积累了一下使用技巧,这篇文章主要给大家介绍了关于VUE学习宝典之el-dialog使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • Vue3中的Refs和Ref详情

    Vue3中的Refs和Ref详情

    这篇文章主要介绍了Vue3中的Refs和Ref,文章围绕Vue3中的Refs和Ref得相关资料应用举例烦人方式展开详细内容,需要的朋友可以参考一下
    2021-11-11

最新评论