使用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 相关文章推荐
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
window.location和document.location的区别分析
Dec 23 Javascript
jquery BS,dialog控件自适应大小
Jul 06 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
Javascript之Math对象详解
Jun 07 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 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
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
浅析使用Turck-mmcache编译来加速、优化PHP代码
2013/06/20 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python 条件判断的缩写方法
2008/09/06 Python
python实现目录树生成示例
2014/03/28 Python
python调用百度语音REST API
2018/08/30 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
Python文件操作的面试题
2013/06/22 面试题
交通安全演讲稿
2014/01/07 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
用python自动生成日历
2021/04/24 Python