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

简介: 最新图解 利用vue-cli 脚手架创建项目首先你的node环境是搭好的node -v一、安装vue-cli首先全局安装vue-cli,这里使用的是cnpm(淘宝镜像)没有就用npm,强烈建立更换淘宝镜像,npm很慢。

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

相关文章
|
JavaScript
vue可拖拽悬浮按钮组件
vue封装一个可拖拽,贴边吸附的悬浮按钮组件。
2253 0
vue可拖拽悬浮按钮组件
couldn't find "libxxxx.so"的解决办法
couldn't find "libxxxx.so"的解决办法
1959 0
|
Oracle 关系型数据库
集成平台即服务(iPaaS)软件
本文研究全球及中国市场集成平台即服务(iPaaS)软件现状及未来发展趋势,侧重分析全球及中国市场的主要企业,同时对比北美、欧洲、中国、日本、东南亚和印度等地区的现状及未来发展趋势
|
Ubuntu Docker 容器
ubuntu 通过docker方式安装clouddrive2
ubuntu 通过docker方式安装clouddrive2
1339 6
|
缓存 开发框架 .NET
看看 Asp.net core Webapi 项目如何优雅地使用内存缓存
看看 Asp.net core Webapi 项目如何优雅地使用内存缓存
266 1
|
JavaScript
vue 首屏添加加载动画 loading
vue 首屏添加加载动画 loading
378 0
|
JavaScript 前端开发 关系型数据库
7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果(Vue loader)类型 - 卡拉云
Vue Loading 加载动画组件 (Vue-loader) 看起来很简单不重要,实际上它是保证用户留存的关键一环。选择好 Loading 加载动画,用户留存率翻倍。本文介绍 7 种不同的加载动画 UI 效果(Vue loader),每一种都有其对应的使用场景。举例,旋转加载动画适合短时间加载,旋转加载还能更细分,比如在按钮上的旋转加载,适合提交数据的极短时间,旋转动画在全局的适合多表格数据加载,旋转动画图片可自定义的适合高度定制化的 APP / 网站等。再举例,进度条类的加载动画适合长时间加载,进度条类也可以更细分,比如有蒙层的进度条,有加载进度条带取消按钮,有加载进度条放在网页顶部,
2747 0
|
XML 存储 编解码
svg的viewBox、width和height的设置说明
svg的是没有边界的,svg画布只是用于展示svg世界中某一个范围的内容,而对于超过了svg画布范围的内容,则会被遮挡。默认svg画布默认显示世界坐标下原点坐标的width*height面积的矩形视野。
|
JavaScript
vue页面加载完毕之后执行
vue页面加载完毕之后执行
415 0
|
安全 文件存储 数据安全/隐私保护
将各大网盘挂载本地使用!爽!
发现了一个网盘变硬盘神器
将各大网盘挂载本地使用!爽!