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定时器完整实例
Feb 10 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 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实现二分查找算法代码分享
2011/06/24 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
javascript中如何判断类型汇总
2019/05/14 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python面向对象编程基础解析(一)
2017/10/26 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
另类冲刺标语
2014/06/24 职场文书
英文慰问信
2015/02/14 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
go 实现简易端口扫描的示例
2021/05/22 Golang