使用vue-cli来创建一个vue项目

大概使用方法官方文档中已经给出了,如下图

使用vue-cli来创建一个vue项目

首先进行vue-cli的安装,在cmd中执行

npm install --global vue-cli

安装成功

使用vue-cli来创建一个vue项目

注:

npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
这是个警告不影响使用,大意为coffee-script这一依赖包已经被移动到coffeescript中(无连接符) (你这不就是改名了么!

然后就可以到对应目录下初始化项目了

使用vue-cli来创建一个vue项目

在输入vue init webpack xxxxxxx后会有一段选项让你设置项目的初始属性(xxxxxxx是你的工程文件夹名称

Target directory exists. Continue? 因为我之前已经有这个文件夹了,这个是在问你在这个目录下已经有同名文件夹了是否直接使用这个文件夹。

下面两个Project name、Project description、Author 都是字面意,名称、描述、作者

Vue build 是让你选择编译方式一般直接选择第一个也就是standalone

Install vue-router 是在问你是否直接为你安装vue的路由组件

Use ESLint to lint your code 是否使用ESLint进行代码规范的约束

Pick an ESLint preset 是选用哪种规范

Set up unit test 是否启用单元测试

最后一个是问你用什么工具管理项目,我是npm

使用vue-cli来创建一个vue项目

安装完毕

使用WebStorm打开项目

使用vue-cli来创建一个vue项目

运行

npm run dev

使用vue-cli来创建一个vue项目

启动成功,访问一下试试

使用vue-cli来创建一个vue项目

能够访问到就证明vue项目已经搭建好了