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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
jquery 应用代码 方便的排序功能
Feb 06 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
JavaScript数组方法总结分析
May 06 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
小程序如何写动态标签的实现方法
Feb 05 Javascript
JavaScript类的继承多种实现方法
May 30 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 缓冲的免费实现方法
2006/10/09 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
PHP中list方法用法示例
2016/12/01 PHP
php实现小程序支付完整版
2018/10/09 PHP
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
python实现ID3决策树算法
2017/12/20 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
详解python中@的用法
2019/03/27 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
网络信息管理员岗位职责
2014/01/05 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
javascript canvas实现雨滴效果
2021/06/09 Javascript
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL