第一个vue-cli项目

第一个vue-cli项目

12.1、什么是vue-cli

vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板;
  预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个估计项目就是脚手架,我们的开发更加的快速;

项目的功能

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

12.2、需要的环境

Node.js:http://nodejs.cn/download/
 安装就是无脑的下一步就好,安装在自己的环境目录下

Git:https://git-scm.com/doenloads
 镜像:https://npm.taobao.org/mirrors/git-for-windows/

确认nodejs安装成功:

cmd下输入node -v,查看是否能够正确打印出版本号即可!
  cmd下输入npm -v,查看是否能够正确打印出版本号即可!
  这个npm,就是一个软件包管理工具,就和linux下的apt软件安装差不多!
    安装Node.js淘宝镜像加速器(cnpm)
    这样的话,下载会快很多~

# -g 就是全局安装
npm install cnpm -g

# 或使用如下语句解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org

安装的过程可能有点慢~,耐心等待!虽然安装了cnpm,但是尽量少用!
安装的位置:C:\Users\administrator\AppData\Roaming\npm

安装vue-cli

cnpm instal1 vue-cli -g
#测试是否安装成功#查看可以基于哪些模板创建vue应用程序,通常我们选择webpack
vue list

12.3、第一个vue-cli应用程序

1.创建一个Vue项目,我们随便建立一个空的文件夹在电脑上,我这里在D盘下新建一个目录

D:\Project\vue-study;

2.创建一个基于webpack模板的vue应用程序

\#1、首先需要进入到对应的目录 cd D:\Project\vue-study
\#2、这里的myvue是顶日名称,可以根据自己的需求起名
vue init webpack myvue

一路都选择no即可;

说明:

  • Project name:项目名称,默认回车即可
  • Project description:项目描述,默认回车即可
  • Author:项目作者,默认回车即可
  • Install vue-router:是否安装vue-router,选择n不安装(后期需要再手动添加)
  • Use ESLint to lint your code:是否使用ESLint做代码检查,选择n不安装(后期需要再手动添加)
  • Set up unit tests:单元测试相关,选择n不安装(后期需要再手动添加)
  • Setupe2etests with Nightwatch:单元测试相关,选择n不安装(后期需要再手动添加)
  • Should we run npm install for you after the,project has been created:创建完成后直接初始化,选择n,我们手动执行;运行结果

在这里插入图片描述

初始化并运行

cd myvue
npm install
npm run dev

执行完成后,目录多了很多依赖

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/4835.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

编写一个函数,输入一个日期,计算其距年底的时间

--编写一个函数,输入一个日期,计算其距年底的时间 create or replace function f_end(i_date varchar2) return number is/*声明四个变量,v_end:存放输入的日期的年底日期 v_date:存放经过转化为日期型的输入字符串 v_minus:存放两个日期之差…

Springboot怎么实现WebSocket通信(二)

前言上一篇文章分享了单机模式下,websocket的基本使用方法,但在实际的业务中,通常是不会这样使用的,大部项目都是分布式部署的,一个工程布署了多个服务节点,前端并不直接请求具体服务节点,而是先…

xijs更新指南(v1.2.1)

xijs 是一款开箱即用的 js 业务工具库, 聚集于解决业务中遇到的常用函数逻辑问题, 帮助开发者更高效的开展业务开发.接下来就和大家一起分享一下v1.2.1 版本的更新内容以及后续的更新方向.1. 添加算法模块分类该模块主要由 WangLei802 贡献, 添加内容如下:添加冒泡排序算法及其…

什么是工程项目管理工作?其特点是什么?

什么是工程项目管理工作?其特点是什么? 工程项目管理是为了实现工程项目的有效、高效和可持续管理而进行的一系列活动。 工程项目的管理就像是驾驭一艘巨大的船只,需要一位经验丰富的船长来领导整个团队。 通过工程项目管理,项…

fiddler(抓包)的用法和HTTP 协议的基本格式

目录 fiddler(抓包)用法: HTTP 协议的基本格式 HTTP请求: 首行 认识HTTP方法 GET和POST的典型区别: 认识请求“报头”(header) HTTP 响应 HTTP状态码: 状态码的分类: 认识响应 …

python语法基础

🐟在本次博客主要想大家介绍一些简单的python语法的注意事项,从代码缩进到注释规则,从标准输入到标准输出,以及位运算符等方面了解python的基础使用方法。那么我们接下来直接开始步入正题,开始我们的python语法的讲解吧…

【SpringCloud】SpringCloud Nacos详解(集群配置)

目录前言一.Nacos集群逻辑图二.Nacos集群搭建1.搭建数据库,初始化数据库表结构2.下载Nacos3.配置Nacos3.启动Nacos4.配置启动nginx5.测试是否成功6.设置服务的nacos地址7.新增一个配置,查看数据看是否进行持久化了前言 在我前面两篇讲的都是单个nacos&a…

c++11 多线程使用

文章目录创建线程异常导致死锁实现两个线程交互的打印奇数和偶数(面试题)创建线程 1.创建线程的方式: 1.拷贝构造禁止了2.允许移动构造3.无参构造后我们可以对对象进行赋值操作4.传递可调用对象(例如包装器,泛函数,lambda,普通函数,静态成员函数) 参数列表 进行创建 2.样例…

第17章_触发器

第17章_触发器 🏠个人主页:shark-Gao 🧑个人简介:大家好,我是shark-Gao,一个想要与大家共同进步的男人😉😉 🎉目前状况:23届毕业生,目前在某公…

JavaEE简单示例——SpringMVC的简单数据绑定

简单介绍: 在前面我们介绍过如何将我们自己创建的类变成一个servlet来处理用户发送的请求,但是在大多数的时候,我们在请求 的时候会携带一些参数,而我们现在就开始介绍我们如何在Java类中获取我们前端请求中携带的参数。首先&…

SpringBoot自定义注解+异步来实现日志管理

一、前言 我们在企业级的开发中,必不可少的是对日志的记录,实现有很多种方式,常见的就是基于AOP注解进行保存,同时考虑到程序的流畅和效率,我们可以使用异步进行保存! 二、基础环境 1. 导入依赖 我这里…

C#,码海拾贝(06)——连分式(Continued Fraction)曲线插值算法,《C#数值计算算法编程》源代码升级改进版

一、连分式法 连分式法是一种有理函数逼近法,其基本出发点是:将原型展开成连分式,然后截取前面几个起主要作用的偏系数构成简化模型,连分式法计算简便,拟合精度较高,是一种很有效的传递函数简化法。 Cont…

【Spring Cloud Alibaba】5.创建服务消费者(Feign)

文章目录简介什么是 Feign开始搭建创建项目修改POM文件添加启动类创建 Feign 接口添加Controller添加配置文件启动项目测试访问Nacos访问接口测试负载均衡通过终端启动多个服务提供者实例简介 接下来我们创建一个服务消费者,通过Feign来进行与服务提供者交互&#…

KDZD程控超低频高压发生器

一、产品概述 本产品接合了现代数字变频技术,采用微机控制,升压、降压、测量、保护自动化。由于电子化,所以体积小重量轻、大屏幕液晶显示,清晰直观、且能显示输出波形、打印试验报告。 设计指标符合《电力设备专用测试仪器通用…

SSM—【笔记】1.1Spring

Spring好处 简化开发,降低企业级开发的复杂性框架整合,高效整合其他技术,提高企业级应用开发与运行效率 简化开发:1、IoC、2、AOP[2.1衍生出事务处理 ] 框架整合:MyBatis、Mybatis-plus、Struts、Struts2、Hibernat…

Android开发-Android常用组件-ToggleButton开关按钮 Switch开关

4.7 开关按钮ToggleButton和开关Switch 1.开关按钮ToggleButton 属性名 说明 android:disabledAlpha 设置按钮在禁用时的透明度 android:textOff 按钮没有被选中时显示的文字 android:textOn 按钮被选中时显示的文字 另外,除了这个我们还可以自己写个 selec…

Spring Cloud之一:注册与发现-Eureka工程的创建

系列目录(持续更新。。。) Spring Cloud:什么是微服务 Spring Cloud之一:注册与发现-Eureka工程的创建 Spring Cloud之二:服务提供者注册到Eureka Server Spring Cloud之三:Eureka Server添加认证 Spr…

SpringBoot(3)整合Mybatis

文章目录一、导入依赖二、编写配置文件三、在启动类上添加注解&#xff0c;表示mapper接口所在位置四、定义mapper接口五、定义mapper.xml映射文件六、service层七、controller层八、修改idea检查代码的严格程度一、导入依赖 <dependency><groupId>org.mybatis.spr…

华为OD机试题,用 Java 解【新员工座位安排系统】问题 | 含解题说明

华为Od必看系列 华为OD机试 全流程解析+经验分享,题型分享,防作弊指南华为od机试,独家整理 已参加机试人员的实战技巧华为od 2023 | 什么是华为od,od 薪资待遇,od机试题清单华为OD机试真题大全,用 Python 解华为机试题 | 机试宝典本篇题目:新员工座位安排系统 题目 工位…

Ganache 安装

一. 下载Ganache Ganache下载链接 根据系统选择对应安装文件 或者brew安装 brew install --cask ganache 二.打开app 点击quickstart 点击save按钮&#xff0c;保存workspace&#xff0c;此时已启动对应端口为7545 三.打开truffle项目&#xff0c;设置配置文件 我已初始化…