图解 利用vue-cli 脚手架创建项目

##最新图解 利用vue-cli 脚手架创建项目

首先你的node环境是搭好的

node -v
复制代码

###一、安装vue-cli 首先全局安装vue-cli，这里使用的是cnpm（淘宝镜像）没有就用npm，强烈建立更换淘宝镜像，npm很慢。。

cnpm i -g vue-cli
复制代码

使用 vue 检查是否成功 如下这样就是成功了

###二：创建项目 在你想创建项目的文件夹里打开cmd 这里使用的是webpack模版

使用 vue list 看来支持的模板
复制代码

使用 vue init webpack my-project（my-project为项目名）
复制代码

然后就是根据提示操作就行。 **对于初学者，我建议的是 ** vue-router 选择 n （vue的路由，根据你的需要选择） ESLint 选择 n （代码检测工具，很严谨的，如果只是学习用的话，建议关闭） unit tests 选择 n （单元测试工具，根据需要选择） e2e tests 选择n （端到端测试，根据需要选择）

然后进入你创建的项目内

cd my-project   （进去项目文件夹）
cnpm i  （安装依赖，我用cnpm，没有就用npm）
如下就成功了
复制代码

###三、启动项目

npm run dev   （在8080端口启动项目）
复制代码

一大串代码过后

最后在浏览器地址栏输入：127.0.0.1:8080 下图就表示成功了！

创建的项目目录如下

以上是Vue脚手架的基本的目录结构，我们一般编写代码都放在src目录下，这里有一个components文件夹，该目录放置自定义组件。src目录下有一个App.vue，该文件是项目展示的窗口文件。