Vue-cli3简单使用(图文步骤)


Posted in Javascript onApril 30, 2019

Vue-cli3.X创建项目

1.环境要求

安装Vue-cli3.x的前置条件:Node.js

以Windows为例安装Node.js,百度 “Node.js官网” 或”Node.js中文网”均可 ,如无特殊要求 下载安装 LTS版(长期支持版,该版本已满足Vue CLI官网所需要求版本要求)

Vue-cli3简单使用(图文步骤)

一路Next即可,一般无需更改默认安装设置

安装完毕在开始菜单内即可找到一个名为 Node.js 的文件夹如下图

Vue-cli3简单使用(图文步骤)

注:Node.js内可直接运行js基础代码(非DOM等相关代码)**

而我们需要使用的是 Node.js command prompt

2.Vue-CLI安装:

官方命令 npm install -g @vue/cli

注:@不能少,少了@安装的不是3.x版本而是1.x、2.x版本,若已经安装了旧版本则需卸载旧版本然后再安装新版本

旧版本卸载命令 npm uninstall vue-cli -g

补充:vue-cli 3.x 卸载命令 npm uninstall @vue/cli -g (如果需要可使用)

Vue-cli3简单使用(图文步骤)

国内下载速度比较慢

查看npm当前下载镜像,命令为:npm get registry

结果> https://registry.npmjs.org/

如果嫌弃下载慢可以切换为淘宝镜像或者直接安装cnpm并更换淘宝镜像,命令如下:

npm config set registry http://registry.npm.taobao.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org

等待安装完毕

Vue-cli3简单使用(图文步骤)

2.1使用脚手架创建项目

建议先考虑项目文件夹储存的位置并进入相关位置,以桌面为例

cd desktop

如果无需更改位置,请跳过;如果需返回上级目录 cd.. 即可,其他cmd命令可自行百度

创建项目的两种方式:

一、直接命令行创建

创建项目命令: vue create 项目名 自己起个名字即可,但请注意不能有大写字母,否则报错:Warning: name can no longer contain capital letters

vue create learn √

接下来会问你选择那种配置(会显示所有保存过的配置,首次使用只会显示 default(babel,eslint) 以及 Manually select features)

可选自己之前创建过的或选择官方默认配置或者手动选择)

Vue-cli3简单使用(图文步骤)

选择Manually select features 将出现以下内容

Vue-cli3简单使用(图文步骤)

方向键 控制上下 空格选择 A 全选 I反转选择

选择好大体的功能/插件之后 回车 接着会让你选择细分的特性

比如 Linter/Formatter 下:

Vue-cli3简单使用(图文步骤)

在保存时进行代码检测

Vue-cli3简单使用(图文步骤)

Babel、PostCSS、ESLint等配置文件存放位置,选择单独保存在各自的配置文件中

Vue-cli3简单使用(图文步骤)

Pick a CSS pre-processor(css预处理语言)下 有SCSS/SASS、LASS、Stylus

还有TS、PWA、Roter(vue 路由管理;SPA必带)、Vuex(vue状态管理)、测试(Unit Testing、E2E Testing)等等,均可按需选择

最后会询问你 是否保存为未来项目的预设配置 如果保存需要输入名称

Vue-cli3简单使用(图文步骤)

等待项目创建...

Vue-cli3简单使用(图文步骤)

项目创建好后按提示进入项目,并启动项目

cd learn 进入后 npm run serve

Vue-cli3简单使用(图文步骤)

这两个地址均可访问,第二个地址也并不能对外访问,应该是没做好端口映射,那这个地址用来干嘛的?

二、通过GUI创建

在下载好vue-cli3.x后,进入项目存储位置后 输入 vue ui,会在浏览器内打开vue项目仪表盘(非初次使用界面)

Vue-cli3简单使用(图文步骤)

在使用过GUI创建过项目后,再次打开就会直接进入旧项目管理界面,如上

如果需要再新建一个项目,可在 左上角下拉菜单内选择 ”Vue项目管理器“返回首页

Vue-cli3简单使用(图文步骤)

Vue-cli3简单使用(图文步骤)

Vue-cli3简单使用(图文步骤)

创建——》在此创建新项目——》输入项目文件夹名(没有git建议关闭)——》下一步

Vue-cli3简单使用(图文步骤)

Vue-cli3简单使用(图文步骤)

可选自己创建过的配置或者官方配置或者手动配置

手动配置如下图所示, 按需选择,相关介绍之前提到过了

Vue-cli3简单使用(图文步骤)

注:有下拉框的得先选择否则不能 下一步

最后点击创建并等待

最终和CMD截图如下

Vue-cli3简单使用(图文步骤)

如果想在浏览器内启动的话 左侧菜单栏——》任务——》任务面板——》serve——》运行——》右侧 启动app (从左往右点击红色即可)

Vue-cli3简单使用(图文步骤)

也可命令行启动,命令与之前所述相同

至此结束,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
jQuery Ajax全解析
Feb 13 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 #Javascript
VSCode使用之Vue工程配置eslint
Apr 30 #Javascript
微信小程序API—获取定位的详解
Apr 30 #Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 #Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 #Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 #Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 #Javascript
You might like
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
检测png图片是否完整的php代码
2010/09/06 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
PHP crc32()函数讲解
2019/02/14 PHP
鼠标图片振动代码
2006/07/06 Javascript
总结一些js自定义的函数
2006/08/05 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
Python 转义字符详细介绍
2017/03/21 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
超实用的 30 段 Python 案例
2019/10/10 Python
Django视图扩展类知识点详解
2019/10/25 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
Python学习之os模块及用法
2020/06/03 Python
python如何代码集体右移
2020/07/20 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
机修工工作职责
2014/02/21 职场文书
空气环保标语
2014/06/12 职场文书
邓小平理论心得体会
2014/09/09 职场文书
公司规章制度范本
2015/08/03 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL