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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
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中的字符串函数
2006/10/09 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
生成二维码方法汇总
2014/12/26 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
汽车专业人才自我鉴定范文
2013/12/29 职场文书
2014年党课学习材料
2014/05/11 职场文书
技术经济专业求职信
2014/09/03 职场文书
党风廉正建设责任书
2015/01/29 职场文书
家庭经济困难证明
2015/06/23 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
Java输出Hello World完美过程解析
2021/06/13 Java/Android