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 相关文章推荐
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
js 实现 input type="file" 文件上传示例代码
Aug 07 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
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&mysql(五)
2006/10/09 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
JAVA中运算符的分类及举例
2015/09/12 面试题
毕业自我评价
2014/02/05 职场文书
班级标语大全
2014/06/21 职场文书
国富论读书笔记
2015/06/26 职场文书