如何创建vue脚手架
创建vue脚手架
Vue脚手架是vue官方提供的标准化开发工具(平台)
参照官方文档vue CLI(command line interface)–命令行接口工具
https://cli.vuejs.org/zh/guide/
下面介绍一下如何安装vue脚手架:
先确认电脑中未安装vue脚手架
安装脚手架前提,需先安装nodejs
进入官方http://nodejs.cn/下载
根据自己的电脑选择下载的版本
双击文件下载
点击下一步,选择安装路径(建议安装到D盘)
一直点击下一步,不需要选择什么,知道finish出现
查看安装环境:
Window + R键打开DOS界面,并输入cmd,点击确定,输入npm -version 回车查看到一下信息
查看自己nodejs版本
看接下来就可用安装脚手架了
第一步(安装一次):全局安装@vue/cli。
使用VUE官网推荐的方式
npm install -g @vue/cli
参照官网地址:https://cli.vuejs.org/zh/guide/installation.html
Window + R键打开运行界面,并输入cmd,点击确定。
输入命令:npm install -g @vue/cli
如果卡住了,就点击回车(可以关注后面的是否跳动)
以下错误是本身的可以忽略
可以用:vue --version 命令,查看当前安装版本
注意:如果出现Unexpected token … in JSON at position … 那么执行:
解决手段1:
切换成淘宝的国内镜像:
npm config set registry https://registry.npm.taobao.org/
查看是否切换成功:
npm config get registry
强制清除npm缓存:
npm cache clean --force
再执行安装npm:
npm install -g npm
再次执行安装vue命令:
npm install -g @vue/cli
第二步:切换到你要创建项目的目录,然后使用命令创建项目
直接在想要创建的目录输入cmd
选择vue 的版本,点击回车(查看其中的基本信息)
选择npm
然后等待(卡住点击回车)
完成后查看并且进入到vue_test文件中执行npm run serve命令
等待翻译其中的内容,自动开启了内置小服务器端口8080
ctrl鼠标点击复制第一个网址8080端口,打开第一个hello页面
然后可以看到vue里面的东西
使用软件(JetBrains WebStorm)打开脚手架,就可以看到脚手架的基本结构
如何创建vue脚手架相关推荐
- 创建vue脚手架 以及 图标不显示的解决
第一步是确保有node.js 然后下载 vue cil 这里犯了一个错误 npm install -g npm 好像是把node更新到最新版本,导致了npm功能不能用了,不匹配 找教程发现 npm u ...
- 创建Vue脚手架并启动出现的报错及解决(总冠军版)
一.赛前准备 准备工作与启动react脚手架不能说相同只能说一摸一样,具体可见 创建react项目并启动出现的报错及解决. 二.正式比赛(勇士总冠军今天!!) 1.全局安装: npm install ...
- 创建Vue脚手架时main.js和App.vue报错的解决方案。
Parsing error:No Babel config file detected 用你的编辑器重新打开该项目,且使用你自己创建的文件夹作为根目录.(babel配置文件需要放在更目录下)
- Vue 脚手架中的.eslintrc.js代码规范 的解决
在我们使用Vue脚手架 创建项目时 尤其是团队共同开发项目时 会按照一个共同的代码规范来编程 创建Vue脚手架中有一个.eslintrc.js格式 但是在编程中我们通常会使用 shift+alt+f ...
- vue-cli2.x旧版本卸载不掉的问题解决方案(亲测+踩坑)附Vue脚手架安装教程
旧版本卸载 问题说明 vue2.x脚手架旧版本卸载不掉的问题:(卸载命令运行后输入vue --version仍一直显示旧版本) 问题解释 首先明确一点,卸载不掉肯定说明你的电脑中至少有两个地方存在脚手 ...
- 前端开发人员必学的VUE脚手架搭建
提示:vue脚手架的作用是用来自动一键生成vue+webpack的项目模版,包括依赖库,免去你手动安装各种插件,寻找各种cdn并一个个引入的麻烦. 文章目录 一.cmd命令操作符如何打开? 1.win ...
- Vue脚手架搭建与一些简单小指令
如果Vue是一条大路,我就是一辆汽车,我跑啊跑,我多快乐! 如果Vue是一条大河,我就是一条小鱼,我游啊游,我多快乐! 如果Vue是一棵大树,我就是一片落叶,我飘啊飘,我多快乐! Vue是前端开发中很 ...
- Vue 脚手架-基本使用
1.脚手架-介绍与安装 webpack自己配置环境繁琐官方提供脚手架, 快速搭建项目基础结构 安装@vue/cli全局模块包, 得到Vue命令, 用于以后创建Vue脚手架项目 步骤: 1.全局安装@v ...
- Vue-cli(vue脚手架)上万字总结,超详细教程
1.创建Vue脚手架 1.1.首先系统需要全局安装Vue脚手架 npm install -g @vue/cli 1.2.创建Vue脚手架工程 进入你想创建vue脚手架的目录,然后输入命令 vue cr ...
最新文章
- 日记 [2008年01月21日]
- Redis RDB文件格式全解析
- SSM格式化导出报表时间的格式
- Spark _17 _SparkShuffle、HashShuffleManager、SortShuffleManager
- SAP Spartacus的site context配置参数SiteContextParamsService
- Hdu2660 Accepted Necklace【简单dfs】
- GIT : IDEA切换到某个tag
- c++tcp接收文件缓存多大合适_linux高性能网络编程之tcp连接的内存使用
- 会java c php三种语言_php java net三种语言的区别
- [PYTHON] 核心编程笔记之八-Python条件和循环
- 支付宝 RSA和RSA2签名算法区别
- python常见图形代码可视化大全整理(包括动图)
- 前端的c语言面试题,腾讯WEB前端笔试题和面试题答案
- JS:Falsy Bouncer(过滤数组假值)
- Squoosh - 谷歌出品的免费开源图片压缩工具,图片大小减少90%!支持 API 开发调用
- Java opencv tld_TLD-(windows) tld c++版可运行版本,亲测. tld OpenCV 252万源代码下载- www.pudn.com...
- 学计算机拼音摇号,电脑摇号:作弊100%!
- 小红书html布局自适应,Flutter实现马蜂窝小红书自适应高度轮播图
- 《程序员健康指南》- 预防背部疼痛
- 链路聚合—3种模式 详细
热门文章
- Android仿高德地图app,Android仿微信调用第三方地图应用导航(高德、百度、腾讯)...
- iOS - 根据推送消息进行语音播报
- 写一篇作为软件测试工程师的年度总结,从以下方面进行描述:本年度的工作概况、个人主要存在的问题及解决措施、收获与心得体会、给团队的建议、下一年的目标与规划。...
- 无法将“xxx”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。
- 创建沉浸式 VR 视频体验
- Apache Beam记录
- 五行与情志的之间的相生相克
- JS继承方式及其优缺点总结
- Servlet详细教程
- WINDOW -- U盘做启动盘重装系统