位置: IT常识 - 正文
Vue开发项目入门——Vue脚手架(vue开发教程)
编辑：rootadmin推荐整理分享Vue开发项目入门——Vue脚手架(vue开发教程)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue项目的开发流程,vue快速入门与实战开发,vue开发教程,vue 项目开发,vue 项目开发,vue开发教程,vue项目的开发流程,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 install2. 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：包版本控制文件上一篇：从零开始的「校园商铺」毕设全栈开发—开题报告(从零开始吧)
下一篇：OpenAI Translator | 基于ChatGPT API全局翻译润色解析插件
