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 相关文章推荐
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
JavaScript获取ul中li个数的方法
Feb 13 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
vue实现图书管理系统
Dec 29 Vue.js
微信小程序单选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实现采集程序原理和简单示例代码
2007/03/18 PHP
十大使用PHP框架的理由
2015/09/26 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
js获取图片长和宽度的代码
2009/11/24 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
Python GAE、Django导出Excel的方法
2008/11/24 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
python3 拼接字符串的7种方法
2018/09/12 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
怎么写好自荐书
2014/03/02 职场文书
社区消防工作实施方案
2014/03/21 职场文书
年度评优评先方案
2014/06/03 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python
Go 内联优化让程序员爱不释手
2022/06/21 Golang