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 相关文章推荐
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
基于javascript实现的搜索时自动提示功能
Dec 26 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
理解Koa2中的async&await的用法
Feb 05 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
从0搭建vue-cli4脚手架
Jun 17 Javascript
微信小程序实现聊天室
Aug 21 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 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
一个基于PDO的数据库操作类
2011/03/24 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
解读Python中degrees()方法的使用
2015/05/18 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
详解Python的三种可变参数
2019/05/08 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
医学专业毕业生个人求职信
2013/12/25 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
党员四风剖析材料
2014/08/27 职场文书
2014年林业工作总结
2014/12/05 职场文书
前台接待岗位职责
2015/02/03 职场文书
综合测评自我评价
2015/03/06 职场文书
网络销售员岗位职责
2015/04/11 职场文书
节约用电通知
2015/04/25 职场文书
大学班长竞选稿
2015/11/20 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
vue 实现上传组件
2021/05/31 Vue.js