如何安装vue-cli 3.x以及怎么使用vue-cli3.x创建项目

安装vue-cli3.x步骤

安装vue-cli3.x版本前，先查看下你的电脑是否安装过vue-cli或是安装过vue-cli2.x版本

•   	vue --version / vue -V
  

如果有vue-cli2.x版本，需要先卸载才能安装vue-cli3.x，卸载完成后就可以安装vue-cli3.x版本咯

•   	npm uninstall vue-cli -g
  

安装vue-cli3.x版本

•   	npm install -g @vue/cli 
  

查看下是否安装成功

•   	vue --version / vue -V 
  

安装完vue-cli3.x版本vue-cli2.x版本就被覆盖掉了

使用vue-cli3.x创建项目

打开命令行窗口

•  	window+R 
  

如果是在桌面创建项目就cd Desktop 进入桌面输入

•  	vue create 项目名称
  

如果是在已经创建好的目录中cd 加目录名，进入到项目的目录中输入

•  	vue create .
  

输入命令按回车键，这里会让你选择是默认的(default)还是手动的(Manually) ,按键盘上的上下键就可以选择默认的(default)还是手动的(Manually)
如果选择默认的(default)，一直回车执行下去就可以了
选择手动的(Manually)回车:
按键盘上的上下键，选择手动的(Manually)

选项配置看个人项目的需求

	空格键是选中与取消，A键是全选
	TypeScript 支持使用 TypeScript 书写源码
	Progressive Web App (PWA) Support PWA 支持。
	Router 支持 vue-router 。
	Vuex 支持 vuex 。
	CSS Pre-processors 支持 CSS 预处理器。
	Linter / Formatter 支持代码风格检查和格式化。
	Unit Testing 支持单元测试。
	E2E Testing 支持 E2E 测试。

根据项目我选择下面这样的

回车后，告诉router路由是使用history模式还是hash模式，这里我选择hash模式，所以我输入no

之后是css的预处理，我选择的是sass

这个是配置文件存放的地方，第一个是独立的文件夹位置，第二个是是在package.json文件里
这里我选择第一个

回车后有个选择Y/N，这步是告诉你是否保存这次所选好的步骤，输入y就是保存，那么下次再创建项目时直接回=会有个选项，选择那个选项直接回车就可以，输入n就是不保存这次的选择步骤，在下次创建项目时，要自己重新选择配置
这里我选择n，然后直接回车就安装成功啦

安装成功后，启动项目

注意：启动项目时，一定要注意是否在项目目录中启动的

•   	cd my-project //进入到项目目录
    	yarn serve  //启动项目
  

在浏览器访问localhost：8080即可

vue-cli3.0的目录比2.0简洁了很多，没了build和config等目录。若需要其他配置则需要自己手动配置了呢

如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具
npm install -g @vue/cli-init
vue init webpack my-project