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 对象的解释
Nov 24 Javascript
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
node使用promise替代回调函数
May 07 Javascript
vue axios整合使用全攻略
May 24 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 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实现将GB编码转换为UTF8
2006/11/25 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
在Pandas中给多层索引降级的方法
2018/11/16 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
日期和时间问题
2015/01/04 面试题
外贸采购员求职的自我评价
2013/11/26 职场文书
欢送退休感言
2014/02/08 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
家庭贫困证明
2014/09/23 职场文书
银行稽核岗位职责
2015/04/13 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python