一、何为vue-cli
vue-cli是一个快速搭建vue项目的脚手架
![05b1b7a4c329d5048389675688f492dd.png](https://i-blog.csdnimg.cn/blog_migrate/2a1aa61d75e513893a60e014d9200a59.jpeg)
![24319337be9b45b26be6fb61c4f00f39.png](https://i-blog.csdnimg.cn/blog_migrate/edf1bb670fd91a8917eab27565263e07.jpeg)
二、快速搭建Vue项目
1)安装最新的 vue-cli(vue脚手架)
- sudo npm install -g vue-cli
命令运行截图如下:
2)安装后查看版本
- vue -V
命令运行截图如下:
![03805ca0368f724f996944874cc6575e.png](https://i-blog.csdnimg.cn/blog_migrate/4a4f7b1d7e6b4caab23eeca1229a2f6b.jpeg)
3)创建项目目录vue-test,进入vue-test目录
- mkdir vue-test
- cd vue-test
命令运行截图如下:
![188103733d94cac98bab7078d997d06d.png](https://i-blog.csdnimg.cn/blog_migrate/62e5245cceabbc27223eca2436345f50.jpeg)
4)初始化exprice项目为webpack模板
- vue init webpack exprice初始化命令解析:vue init
1、template-name为模板的名称,命令中我们使用的是webpack
官方模板:webpack ,webpack-simple, browserify,browserify-simple,pwa,simple
当然也可以安装自己的模板:
vue init username/repo my-project
Where username/repo is the GitHub repo shorthand for your fork.
2、project-name 为自己项目的名字,在这里我们起名为exprice
命令运行截图如下:
![8f2d78fd7db7d62941756fd62ebc34dc.png](https://i-blog.csdnimg.cn/blog_migrate/480cc7061fe96b7a8bda518c9e2d3fbf.jpeg)
5)运行项目
- 进入expire目录:cd expire
- 安装依赖:npm i
- 运行:npm run dev
命令运行截图如下:
![8442263d761ba4a8f686d7345be7db48.png](https://i-blog.csdnimg.cn/blog_migrate/aeb072c9297e7ac05af4d9cd6bbe6c2e.jpeg)
浏览器中输入http://localhost:8084,运行效果如图所示:
![4669168120622359ceb701354476bacc.png](https://i-blog.csdnimg.cn/blog_migrate/06476b4ea42d6c2d495cbb39408deaa8.jpeg)