使用Vue-cli 3.0搭建Vue项目的方法


Posted in Javascript onJune 07, 2018

1. 环境准备

1.1. 安装Node.js (建议使用LTS版本)

1.2. nrm安装及npm registry设置

// use npm
npm i nrm -g
// use yarn
yarn global add nrm

查看可用的npm源

nrm ls

使用Vue-cli 3.0搭建Vue项目的方法

nrm查看npm源.png

切换npm源(以使用taobao为例)

// 用法: nrm use ***
nrm use taobao
// 切换之后可用 nrm ls查看是否已经切换了npm源

使用Vue-cli 3.0搭建Vue项目的方法

nrm切换npm源.png

1.3. 安装yarn

npm i yarn -g

1.4. 安装vue-cli 3.0

npm i @vue/cli -g

2. vue-cli搭建脚本文件

以搭建一个项目名称为vue-test的Vue前端项目为例

在终端输入以下命令

vue create vue-test

根据提示进行相应的配置(以手动配置为例):

2.1. 选择Manually select features

使用Vue-cli 3.0搭建Vue项目的方法

vue-cli-0.png

2.2. 选择项目需要的一些特性(此处我们选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试,暂时不考虑端到端测试(E2E Testing))

使用Vue-cli 3.0搭建Vue项目的方法

vue-cli-1.png

2.3. 选择CSS预处理器语言,此处选择LESS

使用Vue-cli 3.0搭建Vue项目的方法

vue-cli-2.png

2.4. 选择ESLint的代码规范,此处使用 Standard代码规范

使用Vue-cli 3.0搭建Vue项目的方法

vue-cli-3.png

2.5. 选择何时进行代码检测,此处选择在保存时进行检测

使用Vue-cli 3.0搭建Vue项目的方法

vue-cli-4.png

2.6. 选择单元测试解决方案,此处选择 Jest

使用Vue-cli 3.0搭建Vue项目的方法

vue-cli-5.png

2.7. 选择 Babel、PostCSS、ESLint等配置文件存放位置,此处选择单独保存在各自的配置文件中

使用Vue-cli 3.0搭建Vue项目的方法

vue-cli-6.png

2.8. 配置完成后等待Vue-cli完成初始化

使用Vue-cli 3.0搭建Vue项目的方法

vue-cli-7.png

2.9. vue-cli初始化完成后,根据提示,进入到vue-test项目中,并启动项目

// 进入到vue-test项目
cd vue-test
// - 启动服务
yarn serve
// - 打包编译
yarn build
// - 执行lint
yarn lint
// - 执行单元测试
yarn test:unit

3. vue.config.js配置 [TODO]

3.1 vue.config.js介绍

3.2. 配置代理

3.3. 配置Webpack其他选项

4. 升级已有项目到vue-cli 3.0版本 [TODO]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
Moment.js实现多个同时倒计时
Aug 26 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 #Javascript
vue cli2.0单页面title修改方法
Jun 07 #Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 #Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 #Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 #jQuery
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 #Javascript
AngularJS 前台分页实现的示例代码
Jun 07 #Javascript
You might like
php防注
2007/01/15 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
js资料toString 方法
2007/03/13 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
JavaScript 常用函数
2009/12/30 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
分享python数据统计的一些小技巧
2016/07/21 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
Python基于template实现字符串替换
2020/11/27 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
实例详解Python的进程,线程和协程
2022/03/13 Python
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
基于Python编写一个监控CPU的应用系统
2022/06/25 Python