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

本文将介绍使用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项目的目录结构以及各个文件的作用，以及加上自己在开发项目的时候增添一些目录结构和项目的配置。

转载于:https://www.cnblogs.com/zmyxixihaha/p/10899827.html

使用vue-cli3搭建项目详细步骤相关推荐

vue cli3 搭建项目使用vue-router 以及 element-ui
搭建vue项目,(node和git 首先要下载) 1.首先根据vue官网 Cli的说明,快速搭建. cli3上的命令应该是: vue create 项目名称(之后可以一路回车) npm run ser ...
vue+webpack搭建项目超详细教程
在使用vue-cli之前,请确认你的电脑已经安装了 node,建议版本在 8.0.0 以上安装淘宝镜像(强烈推荐安装,不然真的好慢,等到最后还是失败) 安装cnpm的原因:npm的服务器是外国的,所 ...
Vue CLI3搭建的项目中，如何给文件夹起别名?
因为这段大年的时间里,好久没写博客了,是好懒散了.真的是少年易老学难成,一寸光阴不可轻啊.浪费一秒钟是一秒钟的罪过. 我们使用Vue CLI3搭建的项目中,在vue.config.js文件中,在给文件 ...
优购商城项目详细步骤流程
优购商城项目详细步骤流程一.准备的工作 1.文档写项目之前必须要有接口文档准备工作接口文档是必不可少的参考文档我们还可以参考小程序的开发文档.阿里巴巴字体 iconfont .mdn- 2 ...
Vue CLI安装的详细步骤
Vue CLI安装的详细步骤为了以后安装方便,写一个具体的步骤. 1.首先,打开vue官网,在生态系统的工具里找到Vue CLI,点击安装,先全局安装,直接打开cmd命令,执行以下命令.(我选的第一 ...
vue脚手架搭建项目_复习之vue脚手架搭建项目的两种方法
安装脚手架 node 版本要求: > 8.9 . 关于旧版本:如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x),那么需要先卸载掉. 卸载旧版本运行:``npm uninst ...
zookeeper单机和集群搭建过程详细步骤
文章目录: ▶ 单机环境搭建 ▶ 设置zookeeper为开机服务 ▶ 集群环境搭建单机环境搭建要求: 依赖Java环境单机搭建过程: 进入到/opt目录下,创建zookeeper 文件夹 cd ...
mysql数据库主从复制步骤_MySQL搭建主从复制详细步骤
MySQL搭建主从复制详细步骤发布时间:2020-05-26 11:23:27 来源:51CTO 阅读:122 作者:三月下面讲讲关于MySQL搭建主从复制详细步骤,文字的奥妙在于贴近主题相关.所 ...
iis搭建网站教程（iis搭建网站详细步骤）
iis搭建网站教程(iis搭建网站详细步骤) 本教程基于Windows10系统,其他版本基本上步骤相差不大 1.打开我的电脑,在地址栏输入"控制面板"四个字然后回车,打开控制面板界 ...

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

使用vue-cli3搭建项目详细步骤相关推荐

最新文章

热门文章