安装vue-cli的简易过程


Posted in Javascript onMay 22, 2018

安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和版本情况。出现版本号说明你已经安装了npm和node,如果该命令不可用,需要安装node软件包,根据你的系统版本选择下载安装就可以了。

一、安装vue-cli

在命令行工具输入:

npm install vue-cli -g

-g:代表全局安装。用vue -V 来检查你安装版本号(-V,是大写的)

二、初始化项目

我们用vue init 命令来初始化项目:

vue init <template-name> <project-name>

<template-name>:表示模板名称,vue-cli官方为我们提供了5种模板,

webpack,webpack-simple,browserify,browserify-simple,simple

<project-name>:标识项目名称,这个你可以根据自己的项目来起名字。在实际开发过程中,我们一般都会使用webpack这个模板。

vue init webpack vueclitest

输入命令后,会询问我们几个简单的选项,我们根据自己的需要填写就可以了。

Project name:项目名称。注意:这里不能使用大写。

Project description:项目描述。

Author:作者,如果你有配置git的作者,它会读取。

Install vue-router? : 是否安装vue的路由插件。yes

Use ESLint to your code? :是否用ESLint来限制你的代码错误和风格。自己练习不用了。如果是大型团队开发,最好进行配置。

setup unit tests with Karma +Mocha?是否需要安装单元测试工具。我们不需要。N

Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试,我自己练习不需要。输入n

这样我们已经初始化好了第一步。

cd vueclitest 进入我们的vue项目目录。

npm install 安装我们的项目依赖,也就是安装package.json 里的包(也可以使用cnpm来安装)

npm run dev 开发模式下运行我们的程序。给我们自动构建了开发用的服务器坏境和在浏览器中打开,并实时监视我们的代码更改。

总结

以上所述是小编给大家介绍的安装vue-cli的简易过程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
ReactNative Image组件使用详解
Aug 07 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 #Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 #Javascript
Vue页面骨架屏的实现方法
May 22 #Javascript
Angular网络请求的封装方法
May 22 #Javascript
vue input输入框模糊查询的示例代码
May 22 #Javascript
vue 中swiper的使用教程
May 22 #Javascript
vue配置多页面的实现方法
May 22 #Javascript
You might like
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
一个超级简单的python web程序
2014/09/11 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
通过实例解析Python调用json模块
2019/12/11 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
应届生骨科医生求职信
2013/10/31 职场文书
火锅店创业计划书范文
2014/02/02 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers