从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 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
表格 隔行换色升级版
Nov 07 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
使用 vue-i18n 切换中英文效果
May 23 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python错误处理详解
2014/09/28 Python
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
安全生产演讲稿
2014/05/09 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python
python 管理系统实现mysql交互的示例代码
2021/12/06 Python