脚本宝典收集整理的这篇文章主要介绍了

图解 利用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,该文件是项目展示的窗口文件。

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过