从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 相关文章推荐
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
微信小程序canvas动态时钟
Oct 22 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
PHP自定义大小验证码的方法详解
2013/06/07 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
php实现用户登陆简单实例
2017/04/04 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
探究Python中isalnum()方法的使用
2015/05/18 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
python执行精确的小数计算方法
2019/01/21 Python
Python删除n行后的其他行方法
2019/01/28 Python
超实用的 30 段 Python 案例
2019/10/10 Python
Django 自动生成api接口文档教程
2019/11/19 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
酒店个人求职信范文
2014/01/25 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
职代会闭幕词
2015/01/28 职场文书
钱学森观后感
2015/06/04 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
Python 制作自动化翻译工具
2021/04/25 Python