使用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 相关文章推荐
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
js中将字符串转换成json的三种方式
Jan 12 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 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
解析左右值无限分类的实现算法
2013/06/20 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
php xhprof使用实例详解
2019/04/15 PHP
JavaScript中的类继承
2010/11/25 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
js实现筛选功能
2020/11/24 Javascript
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
python批量同步web服务器代码核心程序
2014/09/01 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
python单例模式的多种实现方法
2019/07/26 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
Python decimal模块使用方法详解
2020/06/08 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
苹果美国官方商城:Apple美国
2016/08/24 全球购物
日语翻译个人求职的自我评价
2013/10/14 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
销售团队获奖感言
2014/08/14 职场文书
自主招生学校推荐信
2014/09/26 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python