Vue CLI 3搭建

卸载旧版本

vue cli 升级到3后，package的名字从 vue-cli 改为了 @vue/cli，装了旧版本的，官方的建议是，把旧版本的卸载了，再安装新版本。

卸载指令：npm uninstall vue-cli -g or yarn global remove vue-cli

安装

安装指令：npm install -g @vue/cli or yarn global add @vue/cli

创建项目

vue create <projectName>
1. 选择features

这里选了第二个，手动选择需要的，个人选择了下图所示的内容。

2. 是否使用history路由，这里感觉必要性不大，所以就没用上,有兴趣的或者需要使用的，可以参考Routing with history.pushState
3. 选择css处理器，一般这里选第一个就可以了

4. 代码风格和eslint

这里选的是eslint + standard config ，具体怎么选择看个人习惯吧。
5. 选择lint

6. 选择lint的配置文件如何存放，这里我选了分别存到具体的config文件，而不是package，便于管理

7. 是否保存本次创建项目的配置项，用于下次快速创建项目

8. 然后就可以愉快地等待创建项目了

注意事项

vue cli配置文件

文件路径是：C:\Users\duoyi\.vuerc
文件内容大致如下：

{"packageManager": "npm","presets": {"vue_create_project": {"useConfigFiles": true,"plugins": {"@vue/cli-plugin-babel": {},"@vue/cli-plugin-eslint": {"config": "standard","lintOn": ["save"]}},"router": true,"routerHistoryMode": false,"vuex": true,"cssPreprocessor": "sass"}},"useTaobaoRegistry": false
}

解析

packageManager 用于指定安装包和运行时，使用的是npm还是yarn
presets 上述安装步骤中，第7步询问是否保存创建配置，用于下次快速创建项目

关于配置

安装过程中，曾经询问过我是用npm还是yarn指定安装包和运行，但是，由于没细看，选了yarn，后续安装过程中一直报错，具体错误如下图：

多次卸载重装vue cli，但是并没有解决问题，也没有重新提醒我选择npm或者yarn。
想了想，那可能是配置文件的问题了，但是又不知道vue cli 3的配置文件存在哪，想了想，会不会和设置npm源一样，可以用npm config这类指令呢
于是，打开了cmd，输入了vue -h

看到了有vue config指令，输入后显示如下：

除了把配置文件打印出来，还把配置文件路径打印出来了，so，不用看了，多次卸载重装,但是依旧未果的原因，就是因为卸载重装不会删除配置文件，这里直接把packageManager改成npm，就解决了上面遇到的问题了

原文

Vue CLI 3搭建相关推荐

Vue Cli 3 搭建一个可按需引入组件的组件库架子
Ant-design.Element 这些框架都有按需引入组件的功能.需要使用哪个组件,就引入哪个组件,这样那些没必要的组件就不会打包到我们的项目里了.跟着我下边的步骤,相信大家也能搭建出一个按需引入 ...
Vue CLI 3 脚手架搭建
@[TOC](Vue CLI 3 脚手架搭建) 注意 see -> cli.vuejs.org/zh/guide/ Vue CLI 的包名称由 vue-cli 改成了 @vue/cli Vue ...
解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用工作中常见问题汇总及解决方案 npm install chrome ...
Vue环境的搭建和在vscode上的应用（Window10）
Vue环境的搭建 1.安装: 从官网下载安装包,解压到指定位置,就相当于安装完成了. 2.配置环境变量找到node.js的文件夹,在里面找到src,把路径复制一下. 我在E盘建立了一个文件夹放nod ...
猿创征文｜【Vue五分钟】 Vue Cli脚手架创建一个项目
目录前言一.创建项目的操作步骤选择路由模式选择CSS预编译器选择如何存放配置自动下载项目所需的包文件二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面三.项目的 ...
Vue 全家桶之 vue cli (脚手架)
一.Vue cli 简介 cli --------------------- c : command (命令) l : line ( 行 ) i : interface ( 接口 ) 命令行接口命令 ...
初识Vue CLI 是做什么的？vue cli 目录内容
上一节中给大家简要的简述了VUE CLI的搭建方法,搭建完成项目以会自动生成看到项目的目录,那接下来就研究一下这些目录是做什么的呢接下来我们就看一下这些文件都是什么,vue运行项目时进入的第一个是做 ...
VSCode 搭建Vue开发环境之Vue CLI
2019独角兽企业重金招聘Python工程师标准>>> 一.简介说明 1.关于VS Code开发工具,安装和配置,更多可以参考以前文章 2.关于Vue.js,Vue是一个优秀的渐进式 ...
Vue CLI 3 多页应用项目的搭建
在项目初期时,从零开始搭建和配置本地前端开发环境是一项很繁琐的工作,需要考虑到项目目录结构.项目基本配置.Webpack 配置等等.通过 Vue CLI 3 可以快速的生成一个项目,这样我们就可以专注 ...