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 相关文章推荐
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
搭建vue开发环境
Jul 19 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
原生js拖拽功能制作滑动条实例代码
Feb 05 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
第五节--克隆
2006/11/16 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
PHP _construct()函数讲解
2019/02/03 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
python多线程threading.Lock锁用法实例
2014/11/01 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
django定期执行任务(实例讲解)
2017/11/03 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
党员的自我评价范文
2014/01/02 职场文书
平安建设工作方案
2014/06/02 职场文书
食品工程专业求职信
2014/06/15 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
西安事变观后感
2015/06/12 职场文书
初中政治教师教学反思
2016/02/23 职场文书
纯html+css实现Element loading效果
2021/08/02 HTML / CSS