vue2.0实战之使用vue-cli搭建项目(2)


Posted in Javascript onMarch 27, 2017

Vue-cli是官方推荐的快速构建单页应用的脚手架。官方给的建议,如果你是初次尝试Vue,哪就老老实实用普通的书写引入js文件,这里牵扯太多的东西,例如webpack、npm、nodejs等等,很容易成就从入门到放弃的思想。这篇文章本身就是按照官方的文档中的构建流程来的(官方构建建议)。一下是构建过程。

一、 安装 node.js

首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。

安装完成后,可以命令行工具中输入node -v和npm -v,如果能显示出版本号,就说明安装成功。

vue2.0实战之使用vue-cli搭建项目(2)

二、安装 vue-cli

安装好了 node,我们可以直接全局安装 vue-cli:

npm install -g vue-cli

因为各种不可描述的原因,使用npm安装会很慢,而且很容易出错,所以推荐使用cnpm来安装。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装成功后,使用 cnpm 安装 vue-cli 和 webpack。

cnpm install -g vue-cli

安装完成后,可以使用vue -V 查看是否安装成功。

vue2.0实战之使用vue-cli搭建项目(2)

三、生成项目

首先需要在命令行中进入到项目目录,然后输入:

vue init webpack Vue-demo

其中 webpack 是模板名称,Vue-demo 是自定义的项目名称,命令执行之后,会在当前目录生成一个以该名称命名的项目文件夹。

配置完成后,可以看到目录下多出了一个项目文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目

然后进入项目目录(cd Vue-Project),使用 cnpm 安装依赖

cnpm install

然后启动项目

npm run dev

四、打包上线

自己的项目文件都需要放到 src 文件夹下

项目开发完成之后,可以输入npm run build 来进行打包工作

npm run build

打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看

项目上线时,只需要将 dist 文件夹放到服务器就行了。

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

Javascript 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
理解Javascript_08_函数对象
Oct 15 Javascript
js 分页全选或反选标识实现代码
Aug 09 Javascript
jquery实现图片滚动效果的简单实例
Nov 23 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
浅析Node.js 中 Stream API 的使用
Oct 23 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 Javascript
js实现三级联动效果(简单易懂)
Mar 27 #Javascript
JS数组去重(4种方法)
Mar 27 #Javascript
JS实现隔行换色的表格排序
Mar 27 #Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 #Javascript
axios学习教程全攻略
Mar 26 #Javascript
js oncontextmenu事件使用详解
Mar 25 #Javascript
js 函数式编程学习笔记
Mar 25 #Javascript
You might like
php 获取完整url地址
2008/12/20 PHP
php allow_url_include的应用和解释
2010/04/22 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
Angular排序实例详解
2017/06/28 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
Python高并发和多线程有什么关系
2020/11/14 Python
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
高中生毕业自我鉴定范文
2013/12/22 职场文书
酒店端午节促销方案
2014/02/18 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
MySQL数据库完全卸载的方法
2022/03/03 MySQL