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

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

首先你的node环境是搭好的

node -v

image.png

一、安装vue-cli

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

cnpm i -g vue-cli

image.png

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

image.png

二：创建项目

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

使用 vue list 看来支持的模板

image.png

使用 vue init webpack my-project（my-project为项目名）

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

image.png

然后进入你创建的项目内

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

image.png

三、启动项目

npm run dev   （在8080端口启动项目）

一大串代码过后

image.png

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

image.png

创建的项目目录如下

image.png

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