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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
Javascript的一种模块模式
Mar 22 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 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
操作Oracle的php类
2006/10/09 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
javascript遍历控件实例详细解析
2014/01/10 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
python中sets模块的用法实例
2014/09/30 Python
Python中的pprint折腾记
2015/01/21 Python
Python多线程爬虫简单示例
2016/03/04 Python
Python检测网站链接是否已存在
2016/04/07 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Python3中列表list合并的四种方法
2019/04/19 Python
解析python的局部变量和全局变量
2019/08/15 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
什么是Deployment descriptors;都有什么类型的部署描述符
2015/07/28 面试题
大学生家政服务项目创业计划书
2014/01/30 职场文书
党员演讲稿
2014/09/04 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
授权委托书
2015/01/28 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书