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 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
Angular表格神器ui-grid应用详解
Sep 29 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
javascript函数式编程基础
Sep 15 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的session cookie错误
2009/08/09 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
PHPMailer发送邮件
2016/12/28 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
使用Apache的rewrite
2021/03/09 Servers
键盘控制事件应用教程大全
2006/11/24 Javascript
js 图片轮播(5张图片)
2008/12/30 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
浅谈开发eslint规则
2018/10/01 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
Tensorflow 多线程设置方式
2020/02/06 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
一套带答案的C++笔试题
2014/01/10 面试题
几道数据库的概念性面试题
2014/05/30 面试题
傲盾软件面试题
2015/08/17 面试题
经典团队口号
2014/06/06 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
学习保证书
2015/01/17 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang