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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 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
php的控制语句
2006/10/09 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
JavaScript实现动态留言板
2020/03/16 Javascript
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
Python 处理文件的几种方式
2019/08/23 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
Python的信号库Blinker用法详解
2020/12/31 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
厨师岗位职责
2013/11/12 职场文书
《小草和大树》教学反思
2014/02/16 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
3分钟演讲稿
2014/04/30 职场文书
学校运动会报道稿
2014/09/23 职场文书
计划生育工作汇报
2014/10/28 职场文书
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技