从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 页面关闭前的出现提示的实现代码
May 25 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
Vue如何实现组件间通信
May 15 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的特殊设置
2006/10/09 PHP
PHP 学习路线与时间表
2010/02/21 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
js使用递归解析xml
2014/12/12 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
微信小程序如何使用云开发
2019/05/17 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
Python 互换字典的键值对实例
2019/02/12 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
个人四风问题对照检查材料
2014/10/01 职场文书
违纪学生保证书
2015/02/27 职场文书
JAVA springCloud项目搭建流程
2022/05/11 Java/Android