vue3.0 CLI - 1 - npm 安装与初始化的入门教程


Posted in Javascript onSeptember 14, 2018

node 开发环境请先自行准备

npm install -g @vue/cli 安装完成之后命令行则存在 vue 命令

vue -V 查看本地 vue 版本 vue -h 输出帮助

vue create <project-name> 进入工程文件夹,创建项目。

如:cd studyVue ( 进入工程文件夹 ) vue create config ( 创建 config 项目 )

vue3.0 CLI - 1 - npm 安装与初始化的入门教程

选择 default 配置项,下面没什么可介绍的,自行尝试。

下面介绍选择 manually select features 的相关流程 ( 使用上下箭头按键切换选项 - enter 按键确定选择 - 下同 )

vue3.0 CLI - 1 - npm 安装与初始化的入门教程

该配置项:选择项目需要的特性 ( 让你选择项目里边的插件 )

Babel - 转码工具;TypeScript - 微软出的 js 的超集;PWA -渐进式WEB应用;Router - 路由功能;Vuex - 中心化状态管理;CSS - css处理器;Linter - 代码美化与检查; Unit Testing - 单元测试; E2E Testing -端到端测试。

作为一个有志气的人,咱们全都选,以后慢慢学。( 空格键按键选择 - 下同 )

vue3.0 CLI - 1 - npm 安装与初始化的入门教程

按下 enter 确定之后,能看到上一个配置项我们选择了什么。

该配置项:是否使用 class-style 组件语法,选择 yes 。

vue3.0 CLI - 1 - npm 安装与初始化的入门教程

该配置选择 yes 。

vue3.0 CLI - 1 - npm 安装与初始化的入门教程

该配置项:是否使用 history 模式 ( 该模式含义以后我会介绍 - 官网也有介绍 ),选择 no 。

vue3.0 CLI - 1 - npm 安装与初始化的入门教程

该配置项:选择 css 预处理 ( 我没用过 css 预处理器 ),任意选择了一个。

vue3.0 CLI - 1 - npm 安装与初始化的入门教程

该配置项:选择代码美化和检查配置。这里选择标准配置 ( 我也没用过,先选一个 )。

vue3.0 CLI - 1 - npm 安装与初始化的入门教程

该配置项:选择代码检查美化的相关配置。两项都选。

vue3.0 CLI - 1 - npm 安装与初始化的入门教程

该配置项:选择单元测试解决方案。选择 mocha ( 我也没用过,选择一个用的人多的 )。

vue3.0 CLI - 1 - npm 安装与初始化的入门教程

该配置项:选择端到端测试解决方案。选择nightwatch( 我也不懂,读者自行选择 )。

vue3.0 CLI - 1 - npm 安装与初始化的入门教程

该配置项:选择在哪里存放上述的所有的配置。以前都是放在 package.json 中 ( webpack 使用习惯 ),另外一个是 vue 3.0 新的存配置的方式,使得配置项更加简洁。选择In dedicated config files 。

vue3.0 CLI - 1 - npm 安装与初始化的入门教程

该配置项:将以上所有的配置过程,保存为默认的配置流程。( 也就是个人设置的意思,以后新建项目,默认采用这些配置 )。选择 yes 。

后面让你为这个配置项进行命名。我输入 nDosVue 。

之后就开始自动化的工程配置。1 min 之内就配置好。

vue3.0 CLI - 1 - npm 安装与初始化的入门教程

npm run serve 开启网站;cd config 进入配置文件夹。到此,vue 创建第一个项目完成。

vue3.0 CLI - 1 - npm 安装与初始化的入门教程

最后生成的目录如上图。

总结

以上所述是小编给大家介绍的vue3.0 CLI - 1 - npm 安装与初始化的入门教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 比较时间大小的代码
Apr 24 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
详解vue 命名视图
Aug 14 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
微信公众号网页分享功能开发的示例代码
May 27 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 #Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 #Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 #Javascript
在vue项目中使用md5加密的方法
Sep 14 #Javascript
在vue项目中引用Iview的方法
Sep 14 #Javascript
详解webpack-dev-server使用方法
Sep 14 #Javascript
JS 实现微信扫一扫功能
Sep 14 #Javascript
You might like
php flv视频时间获取函数
2010/06/29 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
JS 获取滚动条高度示例代码
2013/10/24 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
学习JS中的DOM节点以及操作
2018/04/30 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
VSCode 配置uni-app的方法
2020/07/11 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
python下载库的步骤方法
2019/10/12 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
智能旅行箱:Horizn Studios
2018/04/30 全球购物
运动会通讯稿200字
2014/02/16 职场文书
留学顾问岗位职责
2014/04/14 职场文书
法制宣传教育方案
2014/05/09 职场文书
2014年维稳工作总结
2014/11/18 职场文书
协议书范文
2015/01/27 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
自我推荐信格式模板
2015/03/24 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
运动会跳远广播稿
2015/08/19 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python