从0搭建vue-cli4脚手架


Posted in Javascript onJune 17, 2020

之前写了两期前后端分离的SpringBoot项目,从0搭建到整合Mybatis,但是只有后端没有前端的项目是不完整的,所以今天更新一篇从0搭建vue-cli4脚手架。

准备工作,有点类似java的jdk

安装node.js

直接去官网下载就可以https://nodejs.org/zh-cn/

从0搭建vue-cli4脚手架

选择长期支持版,下载好后直接无脑下一步就可以了。

确认node.js安装成功:

cmd下输入 node -v 或 npm -v 能输出相应版本号即可

安装node.js淘宝镜像加速器(cnpm)

类似配置maven的阿里云镜像,正常npm要从国外下载比较慢甚至有时候会报错,安装了cnpm会很快

这里用管理员身份运行cmd,输入: npm install cnpm -g

cmd下输入 cnpm -v 能输出相应版本号即可

从0搭建vue-cli4脚手架

安装vue-cli

注意 坑来了
如果你是第一次搭建vue项目直接cmd下输入:cnpm install -g @vue/cli 即可安装vue-cli4版本
如果你之前创建过vue-cli2版本需要先卸载之前的版本,cmd下输入:cnpm uninstall -g vue-cli 然后再安装新版本,安装好了之后输入 vue -V 查看版本(注意 -V是大写)

到这准备工作就做好了,开始创建项目

因为博主是个后端程序员,所以编译器当然选择IDEA的好兄弟WebStorm,不需要手动去下载插件而且通过WebStorm创建项目不需要我们手动安装webpack。
直接新建一个vue.js项目

从0搭建vue-cli4脚手架

这里要等的时间比较久

从0搭建vue-cli4脚手架

出现这样的提示就代表项目搭建成功了

从0搭建vue-cli4脚手架

可以点击这里直接启动项目

从0搭建vue-cli4脚手架

也可以在终端输入命令: npm run serve 启动 (Ctrl+C终止)

从0搭建vue-cli4脚手架

出现下面提示表示项目启动成功,直接点击链接就可以跳到首页

从0搭建vue-cli4脚手架
从0搭建vue-cli4脚手架

到这里项目就已经搭建成功了,本篇只讲项目搭建,具体业务实现,可以关注我的博客,下期更新。

到此这篇关于从0搭建vue-cli4脚手架的文章就介绍到这了,更多相关vue-cli4脚手架搭建内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js 数据类型转换总结笔记
Jan 17 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
浅析Node.js查找字符串功能
Sep 03 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 #Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 #Javascript
vue移动端的左右滑动事件详解
Jun 17 #Javascript
详解JavaScript中的Object.is()与"==="运算符总结
Jun 17 #Javascript
vue-iview动态新增和删除的方法
Jun 17 #Javascript
vue iview实现动态新增和删除
Jun 17 #Javascript
vue如何搭建多页面多系统应用
Jun 17 #Javascript
You might like
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
Javascript 获取LI里的内容
2008/12/17 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
Three.js快速入门教程
2016/09/09 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
Python FTP操作类代码分享
2014/05/13 Python
介绍Python中内置的itertools模块
2015/04/29 Python
python处理大数字的方法
2015/05/27 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
python调用staf自动化框架的方法
2018/12/26 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
出国签证在职证明
2014/01/16 职场文书
结婚堵门保证书
2015/05/08 职场文书
幼儿园见习总结
2015/06/23 职场文书
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA