博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue-cli脚手架安装和webpack-simple模板项目生成
阅读量:6293 次
发布时间:2019-06-22

本文共 975 字,大约阅读时间需要 3 分钟。

一、vue-cli安装

vue-cli是一个官方vue.js项目脚手架,使用vue-cli可以快速创建vue项目。

安装vue-cli前,请确保已安装nodejs。

// 安装vue-cli,淘宝镜像安装cnpm install vue-cli -g

如果安装失败,可以使用npm cache clean清理缓存,然后再重新安装;如果再失败,还需清理缓存。安装完成后,可以使用vue -V查看版本。

cmd 输入 vue -h,可以看到可以使用的命令:

输入 vue list,可以看到可用的官方vue模板,第一个和第二个已经不用了,pwa主要是做移动端的:

二、使用webpack-simple模板生成项目(工作中使用webpack模板)

①切换到想把项目生成在这个文件中的目录;

②初始化项目;

vue init webpack-simple 项目名

注意:如果不会sass,就写N

③然后就可以切换路径到项目,下载依赖包,启动项目了。

使用webpack模板时:

三、组件的使用

单文件组件放在src下的components文件夹中:

header.vue组件
content.vue组件
footer.vue组件
App.vue

让项目运行起来,可以看到:

就像官网说的:通常一个应用会以一棵嵌套的组件树的形式来组织。

 

转载于:https://www.cnblogs.com/believepd/p/10218746.html

你可能感兴趣的文章
动态下拉菜单,非hover
查看>>
政府安全资讯精选 2017年第十六期 工信部发布关于规范互联网信息服务使用域名的通知;俄罗斯拟建立备用DNS;Google打击安卓应用在未经同意情况下收集个人信...
查看>>
简单易懂的谈谈 javascript 中的继承
查看>>
iOS汇编基础(四)指针和macho文件
查看>>
Laravel 技巧锦集
查看>>
Android 使用 ViewPager+RecyclerView+SmartRefreshLayout 实现顶部图片下拉视差效果
查看>>
Flutter之基础Widget
查看>>
写给0-3岁产品经理的12封信(第08篇)——产品运营能力
查看>>
ArcGIS Engine 符号自动化配置工具实现
查看>>
小程序 · 跳转带参数写法,兼容url的出错
查看>>
flutter error
查看>>
Flask框架从入门到精通之模型数据库配置(十一)
查看>>
10年重新出发
查看>>
2019年-年终总结
查看>>
聊聊elasticsearch的RoutingService
查看>>
让人抓头的Java并发(一) 轻松认识多线程
查看>>
从源码剖析useState的执行过程
查看>>
地包天如何矫正?
查看>>
中间件
查看>>
Android SharedPreferences
查看>>