vue-cli脚手架的安装教程图解


Posted in Javascript onSeptember 02, 2018

 vue-cli脚手架模板是基于node下的npm来完成安装,下面给大家介绍vue-cli脚手架的安装,具体内容如下所述:

https://github.com/vuejs/vue-cli  官网 使用官方推荐的webpack

条件:

node在4.以上,npm在3以上,查看版本号打开cmd输入,node -v npm -v;

vue-cli脚手架的安装教程图解

安装步骤:

1、cmd打开命令行窗口

2、输入npm install vue-cli -g,然后回车等待

vue-cli脚手架的安装教程图解

3、安装结束后输入vue 查看是否安装成功

vue-cli脚手架的安装教程图解
4、运行vueinitwebpack demo(注:项目名称)回车,(想在哪个目录建立vue项目就要在进入到对应目录再输入命令)

vue-cli脚手架的安装教程图解

5、显示Project nanme 项目名 回车(项目名不允许使用大写)

vue-cli脚手架的安装教程图解

6、project description 后面可以写上描述,或者直接回车

vue-cli脚手架的安装教程图解

7、Author 后面可以写作者也可以回车 (如果配置过git会自动获取git的name)

vue-cli脚手架的安装教程图解

8、Install vue-router? 选择Y(官方推荐的路由插件,几乎每个项目都用得到)

vue-cli脚手架的安装教程图解

9、User ESLint to lint your code? 选Y(是否启用eslint检测规则,如果不是公司的大型项目或者多人共同开发博主感觉没有必要安装)

vue-cli脚手架的安装教程图解

10、Set up unit tests? 问的是否要测试 选n

vue-cli脚手架的安装教程图解

11、Setup e2e tests with Nightwatch? 选n( 用Nightwatch设置E2E测试?)

vue-cli脚手架的安装教程图解

12、Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) 选择使用npm、还是yarn安装,一般都是直接回车就好

vue-cli脚手架的安装教程图解

13、这个时候在你创建的目录下就有你的目录了

vue-cli脚手架的安装教程图解

14、cd 你的目录名然后输入npm run dev启动应用,启动成功它会自动打开一个vue页面

vue-cli脚手架的安装教程图解
vue-cli脚手架的安装教程图解

到此为止你已经学会了怎么安装 vue-cli脚手架工具了,下面我简单的说明下各个目录都是干嘛的:

vue-cli脚手架的安装教程图解

main.js的介绍

el是挂载点,router是路由

App.vue 是整个文件的入口,有三部分,template模板 script 逻辑 style样式

总结

以上所述是小编给大家介绍的vue-cli脚手架的安装教程图解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
javascript小数四舍五入多种方法实现
Dec 23 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 Javascript
angular异步验证器防抖实例详解
Mar 31 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 #Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 #Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 #Javascript
修改vue+webpack run build的路径方法
Sep 01 #Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 #Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 #Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 #Javascript
You might like
curl和libcurl的区别简介
2015/07/01 PHP
ThinkPHP安装和设置
2015/07/27 PHP
详解PHP归并排序的实现
2016/10/18 PHP
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
详解参数传递四种形式
2015/07/21 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
python类定义的讲解
2013/11/01 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
python+django+rest框架配置创建方法
2019/08/31 Python
python 操作hive pyhs2方式
2019/12/21 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
公务员年度个人总结
2015/02/12 职场文书
关于幸福的感言
2015/08/03 职场文书
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL