查看vue-cli4版本
vue –version 查看一下vue-cli的版本。
![Vue教程之vue-cli4命令行创建项目](https://www.fdevops.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
创建项目
vue create hello-world 创建一个名为 hello-world 的vue项目。
手动配置
![Vue教程之vue-cli4命令行创建项目](https://www.fdevops.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
安装需要的插件
![Vue教程之vue-cli4命令行创建项目](https://www.fdevops.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
选择Vue版本
![Vue教程之vue-cli4命令行创建项目](https://www.fdevops.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
选择路由模式
![Vue教程之vue-cli4命令行创建项目](https://www.fdevops.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
选择CSS预处理器
![Vue教程之vue-cli4命令行创建项目](https://www.fdevops.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
选择linter/formatter配置
![Vue教程之vue-cli4命令行创建项目](https://www.fdevops.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
每次保存时 lint 代码
![Vue教程之vue-cli4命令行创建项目](https://www.fdevops.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
创建单独的文件存放,Babel或者ESLint等的配置
![Vue教程之vue-cli4命令行创建项目](https://www.fdevops.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
是否将此项目配置保存为预设以供将来的项目使用,这里选择 “否”
![Vue教程之vue-cli4命令行创建项目](https://www.fdevops.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
出现以下内容则创建成功,执行红框内的命令即可启动新创建的Vue项目
![Vue教程之vue-cli4命令行创建项目](https://www.fdevops.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
启动后,访问以下地址即可
![Vue教程之vue-cli4命令行创建项目](https://www.fdevops.com/wp-content/themes/justnews/themer/assets/images/lazy.png)