vue-cli安装教程学习(Vue新手指南之创建第一个vue-cli脚手架程序)
类别:编程学习 浏览量:1721
时间:2022-01-26 01:23:59 vue-cli安装教程学习
Vue新手指南之创建第一个vue-cli脚手架程序1. Vue--第一个vue-cli程序
Vue的开发都是要基于NodeJS,实际开发采用Vue-cli脚手架开发,vue-router路由,vuex做状态管理;Vue UI,界面我们一般使用ElementUI(饿了么出品),或者ICE(阿里巴巴出品)来快速搭建前端项目~~
ElementUI
ICE
1.1 什么是vue-cli
vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板;
预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个估计项目就是脚手架,我们的开发更加的快速;
项目的功能
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
1.2 需要的环境
- Node.js
- Git
确认nodejs安装成功:
- cmd下输入node -v,查看是否能够正确打印出版本号即可!
- cmd下输入npm -v,查看是否能够正确打印出版本号即可!
npm,就是一个软件包管理工具
安装vue-cli
npm instal1 vue-cli -g #测试是否安装成功#查看可以基于哪些模板创建vue应用程序,通常我们选择webpack vue list
提示:如果vue list 查询失败请把 node_global目标添加到path环境变量
1.3 第一个vue-cli程序
1.3.1 创建一个Vue项目
我们随便建立一个空的文件夹在电脑上,我这里在D盘下新建一个目录
1.3.2 创建一个基于webpack模板的vue应用程序
#1、首先需要进入到对应的目录 cdE:\IDEACode\Vue\vue #2、这里的myvue是顶日名称,可以根据自己的需求起名 vue init webpack myvue
一路都选择no即可;
说明:
1.3.3 初始化并运行
cd myvue npm install npm run dev
命令执行成功后会出现以下提示
在游览器打开刚刚的端口
可以在index.js修改端口号等配置文件
总结
到此这篇关于Vue新手指南之创建第一个vue-cli程序的文章就介绍到这了,更多相关第一个vue-cli程序内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue-cli请求数据的方式(vue-cli配置使用Vuex的全过程记录)
- vuecli打包项目(使用vue-cli创建项目并webpack打包的操作方法)
- vue-cli4开发多页面应用(深入理解Vue-cli4路由配置)
- vuecli项目入门(vue-cli4.5.x快速搭建项目)
- vue-cli安装教程学习(Vue新手指南之创建第一个vue-cli脚手架程序)
- 使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
- 大果肉搭配薄瓜皮, 绿宝 脆甜爽口,不愧是甜瓜中的 佼佼者(大果肉搭配薄瓜皮)
- 河南尉氏县因地制宜发展果蔬种植 水坡镇绿宝甜瓜变 金瓜(河南尉氏县因地制宜发展果蔬种植)
- 谢广坤,你这么欺负谢腾飞,良心不会痛吗(你这么欺负谢腾飞)
- 乡村爱情15 宋晓峰怀疑自己孩子,腾飞与姜奶奶亲子鉴定出结果(宋晓峰怀疑自己孩子)
- 《乡村爱情13》开播,新版刘能以假乱真,编剧思维进入瓶颈(新版刘能以假乱真)
- 当年的 白洋淀战神 练肌肉 嘎子哥也成为行走的荷尔蒙(当年的白洋淀战神)
热门推荐
- 怎么开放sql server端口(SQLServer2019配置端口号的实现)
- ddos防御实例(浅析云主机防ddos的基础防御)
- dede织梦的后台如何调整和使用(dedecms织梦模板去掉文档内链自动连接关键词的下划线)
- django参数判断(Django保护敏感信息的方法示例)
- 微信小程序通知验证签名方法(微信小程序实现电子签名)
- event.keycode的值
- c语言可以实现python所有功能吗(Python实现的调用C语言函数功能简单实例)
- css font的简写规则
- dedecms字数代码(用dedecms实现拼音显示文章标题页文件名的方法)
- php 创建定时任务(PHP扩展Swoole实现实时异步任务队列示例)