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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
五种js判断是否为整数类型方式
Dec 03 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
JavaScript构建自己的对象示例
Nov 29 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
vue过滤器用法实例分析
Mar 15 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 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
sony ICF-2010 拆解与改装
2021/03/02 无线电
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
php验证手机号码
2015/11/11 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
laravel5.6实现数值转换
2019/10/23 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python计算圆周率pi的方法
2015/07/11 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
python一键去抖音视频水印工具
2018/09/14 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
一道SQL面试题
2012/12/31 面试题
中文教师求职信
2014/02/22 职场文书
质量承诺书格式
2014/05/20 职场文书
先进教师事迹材料
2014/12/16 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
python3实现无权最短路径的方法
2021/05/12 Python
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android