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

相关文章
|
缓存 Java Serverless
Serverless 应用引擎常见问题之SAE设置超时时间如何解决
Serverless 应用引擎(Serverless Application Engine, SAE)是一种完全托管的应用平台,它允许开发者无需管理服务器即可构建和部署应用。以下是Serverless 应用引擎使用过程中的一些常见问题及其答案的汇总:
252 0
couldn't find "libxxxx.so"的解决办法
couldn't find "libxxxx.so"的解决办法
1984 0
|
Oracle 关系型数据库
集成平台即服务(iPaaS)软件
本文研究全球及中国市场集成平台即服务(iPaaS)软件现状及未来发展趋势,侧重分析全球及中国市场的主要企业,同时对比北美、欧洲、中国、日本、东南亚和印度等地区的现状及未来发展趋势
|
IDE 算法 Java
通义灵码企业级能力全面升级
本指南介绍如何使用通义灵码企业版提升代码质量和效率。首先,需注册并登录通义灵码企业版及 IDE 插件,下载本地工程和知识库压缩包,创建企业知识库并上传文档和代码。随后,可通过开启检索增强功能体验基于企业规范的代码风格优化、前端组件代码补全及后端算法函数生成等功能,显著提高开发效率和代码质量。
441 2
|
缓存 开发框架 .NET
看看 Asp.net core Webapi 项目如何优雅地使用内存缓存
看看 Asp.net core Webapi 项目如何优雅地使用内存缓存
294 1
|
JavaScript
echarts在Vue项目中的实际运用效果图
这篇文章展示了在Vue项目中使用ECharts图表库的步骤,包括安装ECharts、引入到Vue组件、创建图表实例以及通过watch监听数据变化来实现实时数据更新的方法。
echarts在Vue项目中的实际运用效果图
|
运维 数据安全/隐私保护 Python
Python基于telnetlib模块实现交换机全面巡检自动化运维项目
Python基于telnetlib模块实现交换机全面巡检自动化运维项目
|
XML 存储 编解码
svg的viewBox、width和height的设置说明
svg的是没有边界的,svg画布只是用于展示svg世界中某一个范围的内容,而对于超过了svg画布范围的内容,则会被遮挡。默认svg画布默认显示世界坐标下原点坐标的width*height面积的矩形视野。
|
SQL 存储 关系型数据库
group by语句查询如何确保保留重复数据
group by语句查询如何确保保留重复数据
342 0
|
Prometheus Kubernetes Go
哪些项目使用Go语言开发?
哪些项目使用Go语言开发?
221 0