Vue开发项目入门——Vue脚手架
1.什么是Vue脚手架
Vue脚手架是Vue官方提供的标准化开发工具(开发平台),它提供命令行和UI界面,方便创建vue工程、配置第三方依赖、编译vue工程。
特别注意:Vue脚手架是用来方便开发的,但vue脚手架不是最终发布到生产环境的产品。很多人会误认为生产环境也要安装vue脚手架。
2.vue脚手架执行步骤
建议以管理员角色打开cmd界面,开始->Windows系统->命令提示符->更多->以管理员身份运行。如果当前用户是管理员用户,直接使用组合快捷键Windows+R打开cmd界面
1、先查看是否安装了vue,执行命令
vue -V
如果提示:'Vue' 不是内部或外部命令,也不是可运行的程序或批处理文件。先排查自己的电脑有没有安装npm环境。
npm -V
如果显示版本号,说明安装了npm。
使用安装命令
npm install -g @vue/cli
安装完成再使用Vue -V可以看到Vue的版本
2、切换到指定目录,用命令创建项目
建议将开发的项目可以放到同一个文件夹下建立分文件夹,方便维护查找。比如我将开发的vue项目统一放到我的F盘下的vueProject文件夹下。使用cmd命令先切换到F://vueProject下再使用创建项目命令。
F:
cd vueProject
vue create vuetest
注意事项:
使用vue create 后面的项目名,名字不要大写,比如我如果使用vueTest会提示:
Invalid project name:”vueTest”
Warning: name can no longer contain capital letters
3、执行完创建vue create 项目名的命令,会提示:
Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features
提示你来选择2/3版本进行开发,通过上下键来切换选择2或者3
注意:
(1)如果报错: ERROR command failed: npm install --loglevel error --legacy-peer-deps
解决方法修改C盘用户文件夹下的 .vuerc文件。 将 “useTaobaoRegistry”: false, 值改为true。
修改之后创建成功,我们看一下创建之后的目录结构:
4、启动项目【上一步最后有提示命令】
cd vuetest
npm run serve
5、访问项目
浏览器中输入访问地址:http://localhost:8080/
3.模板项目结构(各文件夹)
- 1.node_modules //npm install
- 2. public
- (1)favicon.ico: 页签图标
- (2)index.html: 主页面
- 3.src
- (1)assets: 存放静态资源
- (2)component: 存放组件
- 4.App.vue: 汇总所有组件
- 5.main.js: 入口文件
- 6.gitignore: git 版本管制忽略的配置
- 7. babel.config.js: babel 的配置文件
- 8.package.json: 应用包配置文件
- 9. README.md: 应用描述文件
- 10. package-lock.json:包版本控制文件
Vue开发项目入门——Vue脚手架相关推荐
- vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
- vue开发项目必备知识
Vue项目开发相关问题总结. 一.创建一个项目(两种方式) 1.通过CLI命令行创建,具体步骤如下:(1)Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11 ...
- 前端vue开发项目中的技术框架【简单推荐】
PC管理后台类型 技术选用: vue + element-ui 选择理由: 选择vue的原因 概述:前端主流MVVM框架, vue相对react写起来更方便,vue比react更容易上手,vue文档完 ...
- Python+Vue开发Web入门实例
其实是个夭折了的练手项目,用Python写的后端,提供json格式数据给前端Vue进行渲染 代码写的比较乱,不过还是不忍扔掉,归档记录一下吧,以后再用到了也可以做个参考 数据库 文件列表 db.py ...
- 使用Vue开发项目(一)
Vue官方文档 Vue.js Vue实例 <!DOCTYPE html> <html lang="en"> <head><meta cha ...
- VSCode 搭建Vue开发环境之Vue CLI
2019独角兽企业重金招聘Python工程师标准>>> 一.简介说明 1.关于VS Code开发工具,安装和配置,更多可以参考以前文章 2.关于Vue.js,Vue是一个优秀的渐进式 ...
- 小程序用vue开发可以吗,vue直接开发小程序
一个完全的小白想学微信小程序开发,请问要学 谷歌人工智能写作项目:小发猫 编写微信小程序所需要的基础 前端一般就是vue+element,然后起码的html5,css3,javascript等基础知识 ...
- Vue.js 项目查看 vue版本号
vue -V或者是vue --version查询的是vue-cli的版本,也就是vue脚手架的版本. 如果想要查看vue的版本,直接去项目中,在根目录下,找到package.json文件夹 找&quo ...
- 丁香医生vue开发项目,接口用的主要是官方开放的Api接口,无后端
文章目录 1.项目介绍 2.部署须知 3.项目部分截图 1.项目介绍 项目源码:丁香医生源码 可以实时地显示每日的疫情状况,每日更新,有地图显示,可以看到各个区域的疫情状况. 2.部署须知 vue方式 ...
最新文章
- JavaSE基础笔记八
- Kafka系列一之架构介绍和安装
- JavaXml教程(十)XML作为属性文件使用
- HDLBits答案(9)_卡诺图与最简SOP式
- Guava的测试集合实现
- bash中将字符串split成数组的方法
- dw写出来的php乱码,解决DW中的乱码问题
- 标准Android按钮具有不同的颜色
- Python 帮助信息(pydoc模块)
- 【优化算法】吉萨金字塔建造优化算法(GPC)【含Matlab源码 1438期】
- 写给非网工的CCNA教程(8)跨LAN的通信
- android打包绕过签名,实战android打包和签名
- 如何使用Burp suite抓取Fiddler转发的流量包
- PyQt5 --- 进度条拖动点击视频播放
- 关于Android Framework渲染机制,你需要学习哪些?
- L1-029 是不是太胖了 (5分)
- 盘点男士们也喜爱的八大女性APP
- 聊聊Twemproxy是什么
- 使用rke部署k8s集群
- Linux常用命令(4)-磁盘管理