详解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

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

赞 (0)

相关推荐

  • 关于Vue Webpack2单元测试示例详解

    前言 最近发现一个问题,vue-cli 提供的官方模板确实好用.但一直用下来手贱毛病又犯了,像穿了别人的内衣,总感觉不舒服. 所以有机会就瞎倒腾了一遍,总算把各个流程摸了一把.这里分享一下配置带覆盖率的单元测试.分享出来供大家参考学习,话不多少了,来一起看看详细的介绍: 一.文件结构 基本的文件结构. ├─src │ ├─assets │ ├─components │ ├─app.vue │ └─main.js ├─test │ └─unit │ ├─coverage │ ├─specs │ ├

  • 详解vue+vueRouter+webpack的简单实例

    详解vue+vueRouter+webpack的简单实例

    最近vue更新的2.0版本,唉,我是在2.0版本前学习的,现在更新了又要看一遍了,关键是我之前看了3个星期2.0就更新了,vux还没同步更新,导致我用vux时要将vue的版本降回1.x,vue-router也要降回1.0才能使用~~~所以今天就写一个单页的下方tabbar的实例来记录一下吧,也希望各位在用vue全家桶时少点坑吧,当然不是用vux= =-只是仿造而已 这里的demo我会使用vue2.0的simple-template作为脚手架,vue-router版本也是2.0的,如果想使用vux

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

    详解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 表示全局安装 编程过程中需要引入模块的话可

  • 详解webpack+ES6+Sass搭建多页面应用

    webpack同之前的gulp相比,gulp属于非模块化打包工具,webpack属于模块化打包工具,两者的优劣这里不做过多分析(可自行百度). 目的:是为了分享一下使用过程中,用到的插件.loader.遇到的各种问题以及解决办法,最后会附上最终代码. 在这个项目中,用 webpack打包css.scss.js.图片文件.jquery.第三方插件.字体图标,编译es6.压缩html.压缩js.压缩css ,基本涵盖了常用的东西. 代码结构如下 下面单独说几个难点 1.打包多页面,使用到的插件是ht

  • 详解webpack 入门与解析

    每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档. webpack是基于node的.先安装最新的node. 1.初始化 安装node后,新建一个目录,比如html5.cmd中切到当前文件夹. npm init -y 这个命令会创建一个默认的package.json.它包含了项目的一些配置参数,通过它可以进行初始安装.详细参数:https://docs.npmjs.com/files/package.json. 不要y参数的话,会在命令框中设置各项参数,但

  • 详解处理Vue单页面应用SEO的另一种思路

    详解处理Vue单页面应用SEO的另一种思路

    vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.React,可谓妇孺皆知.随着单页面应用的普及,人们在感受其带来的完美的用户体验,极强的开发效率的同时,也似乎不可避免的要去处理 SEO 的需求. 本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介

  • 详解如何使用Node.js实现热重载页面

    前言 前不久我结合browser-sync+gulp+gulp-nodemon实现了一款生产环境热更新(我之前理解有点偏差,应该定义为热更新,不是热重载)的项目脚手架,那么,今天我们将使用Node.js实现一个热重载页面. 那么,我今天就总结一下吧,以防止大家也跟我一样. 热重载 所谓热重载就是页面每次改动,不需要手动去刷新,可自动刷新. 热更新 浏览器的无刷新更新,允许在运行时替换,添加,删除各种模块,而无需进行完全刷新重新加载整个页面. 目的:加快开发速度,所以只适用于开发环境下使用. 思路

  • 详解本地Vue项目请求本地Node.js服务器的配置方法

    详解本地Vue项目请求本地Node.js服务器的配置方法

    目录 1.使用vue-cli脚手架搭建vue项目 2.使用koa搭建node后端 3.Vue项目中添加后端请求 参考资料: 前言:本文只针对自己需要本地模拟接口于是搭建一个本地node服务器供自己测试使用,仅作自己从头到尾搭建项目的记录 1.使用vue-cli脚手架搭建vue项目 1.在桌面运行 cmd,使用命令vue create demo创建一个vue项目demo,插件依赖等使用默认配置2.项目创建成功之后,使用命令 cd demo,进入 demo 文件夹,然后使用命令 npm run se

  • 详解使用vue脚手架工具搭建vue-webpack项目

    详解使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一系列的工具,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等.对于一个需要长期维护和大型的项目而言,这些工具是必不可少的,但是尝试配置初始化这些很痛苦.这就是我们发布vue官方提供的脚手架工具的原因,一个简单的构建工具,通过几个默认的步骤帮助你快速的构建Vue.js项目. 1.安装node环境 可以

  • 详解webpack模块化管理和打包工具

    本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具. 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际 需要的时候再异步加载.通过 loader  的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.

  • 详解Django+Vue+Docker搭建接口测试平台实战

    详解Django+Vue+Docker搭建接口测试平台实战

    一. 开头说两句 大家好,我叫林宗霖,是一位测试工程师,也是全栈测开训练营中的一名学员. 在跟着训练营学习完Docker容器技术系列的课程后,理所应当需要通过实操来进行熟悉巩固.正好接口自动化测试平台需要迁移到新的测试服务器上,就想要体验一番Docker的"一次构建,处处运行".这篇文章简单介绍了下这次部署的过程,其中使用了Dockerfile定制镜像和Docker-Compose多容器编排. 二. 项目介绍 项目采用的是前后端分离技术来实现的,前端是Vue+ElementUI,后端是

  • 详解webpack 打包文件体积过大解决方案（code splitting）

    优化对比 : 未优化前:index.html引入一个main.js文件,体积2M以上. 优化后入:index.html引入main.js.commons.js.charts.js.other.js.以达到将main.js平分目的.每个文件控制300k以内.(如果高兴100k也没问题) 用到的一堆库及工具: vue.webpack.babel.highcharts.echarts.jquery.html2canvas******此去省略若干m代码 问题: 开发环境用webpack后发现单个js文件

随机推荐