首页 > 其他 > 详细

使用vue-cli3搭建项目详细步骤

时间:2019-05-21 15:32:59      阅读:636      评论:0      收藏:0      [点我收藏+]

本文将介绍使用vue-cli3创建项目以及一些相关的配置。

手脚架vue-cli最新版本为vue-cli3,,如果电脑上安装了vue-cli2来创建vue项目的话,需要先将vue-cli2先卸载,重新安装vue-cli3。

安装vue-cli3

1、执行npm uninstall vue-cli -g命令卸载之前的旧版本

2、执行npm install @vue/cli -g命令安装最新版本

创建项目

1、vue create 项目名称

示例:vue create hell-world

注意:不能用驼峰方式命名项目名称了,它会报错的,只能全小写

2、执行(1)命令以后出现如下界面,我选择的是手动配置

技术分享图片

3、选择需要的模块

技术分享图片

选择的选择的是babel、Router、Vuex、Linter/Formatter、unit Testing、E2E Testing

在这里不知道为什么选这些,组长就这么写的,后续再问。

4、一系列操作,首先是路由部分,我选择了n

技术分享图片

5、回车以后让你进行eslint配置,我选择了标准配置

技术分享图片

6、检查设置,我选择的是保存的时候检查

技术分享图片

7、单元测试。前端的单元测试目前有两个比较热的框架,一个是karma+mocha+chai的方式,一个是jest。我选择的是第一个,我也不懂,等公司大佬教吧

技术分享图片

8、回车以后进入到这个配置,也不知道是什么,先听组长的命令,选择nightwatch。听说nightwatch框架,语法简洁,比较容易理解。

技术分享图片

9、文件存放位置。我选择的是单独存放。

技术分享图片

10、是否保存当前配置,以便下次快速创建。我选择的否

技术分享图片

11、回车以后出现创建页面

技术分享图片

12、大写的注意:在执行上面的时候会报错。会报关于chromedriver的错误,至于为什么会出现这个错误就不知道了。如果出现这个错误,输入npm config set chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver命令执行后,重新创建项目,完美解决。

13、稍等片刻,你将看到如下情景。此时项目创建成功,我们就迫不及待的进入到项目,执行npm run serve看一下。

技术分享图片

至此,一个vue项目创建完成。稍后我会说明一下用cli3创建的vue项目的目录结构以及各个文件的作用,以及加上自己在开发项目的时候增添一些目录结构和项目的配置。

 

使用vue-cli3搭建项目详细步骤

原文:https://www.cnblogs.com/zmyxixihaha/p/10899827.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!