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的执行过程(图文)
May 20 Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
vue组件之Alert的实现代码
Oct 17 Javascript
详解vue的diff算法原理
May 20 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 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&MYSQL分页原理及实现
2007/01/02 PHP
php !function_exists("T7FC56270E7A70FA81A5935B72EACBE29"))代码解密
2011/01/07 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
php集成开发环境详解
2019/09/24 PHP
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
详解Vue之计算属性
2020/06/20 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
如何实现删除numpy.array中的行或列
2018/05/08 Python
python随机数分布random测试
2018/08/27 Python
PyTorch预训练的实现
2019/09/18 Python
Python中SQLite如何使用
2020/05/27 Python
用python实现一个简单的验证码
2020/12/09 Python
python简单实现插入排序实例代码
2020/12/16 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
新教师工作感言
2014/02/16 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
矛盾论读书笔记
2015/06/29 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书