使用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进阶教程(第四课第一部分)
Apr 05 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
Javascript的闭包详解
Dec 26 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
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
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
不错的JS中变量相关的细节分析
2007/08/13 Javascript
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
2019/06/17 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
python解析基于xml格式的日志文件
2017/02/25 Python
python 获取url中的参数列表实例
2018/12/18 Python
python提取log文件内容并画出图表
2019/07/08 Python
python基于Selenium的web自动化框架
2019/07/14 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
Python定义一个Actor任务
2020/07/29 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
班主任寄语2016
2015/12/04 职场文书