vue框架-vue-cli

vue-cli

Vue CLI是一个官方的脚手架工具，用于快速搭建基于Vue.js的项目。Vue CLI提供了一整套可配置的脚手架，可以帮助开发人员快速构建现代化的Web应用程序。

Vue CLI通过提供预先配置好的Webpack模板和插件，使得开发人员可以在不需要手动编写Webpack配置的情况下快速创建Vue应用。Vue CLI还提供了一组命令行工具，如创建、构建、测试和部署Vue应用等。

使用Vue CLI可以方便地创建Vue项目，并提供了许多常用功能的预设，比如ESLint代码检查、Babel转译、单元测试工具、CSS预处理器、服务器代理等等。此外，在Vue CLI的基础上，还可以添加其他的插件来扩展其功能。

总之，Vue CLI是一款功能强大的、易于使用的工具，可以大大提高Vue应用的开发效率。

主要功能

Vue CLI 提供了一套完整的工具链，方便开发人员在创建、开发、测试和部署 Vue 项目时进行高效的操作。它简化了项目配置和管理的过程，使得开发者能够更专注于业务逻辑的实现。

  1. 快速创建项目：Vue CLI 允许你通过简单的命令行界面快速创建一个新的 Vue 项目。它提供了一系列预设模板，包括官方推荐的标准模板、PWA（渐进式 Web 应用）模板、TypeScript 模板等，可以根据需求选择合适的模板。

  2. 零配置开发服务器：Vue CLI 内置了一个开发服务器，它使用了 webpack-dev-server 来实现热重载和自动刷新等功能。在开发阶段，你可以使用 Vue CLI 启动本地开发服务器，实时预览和调试你的应用程序。

  3. 代码打包和优化：Vue CLI 可以通过 webpack 对项目进行打包和优化。它通过内置的配置文件来管理构建过程，自动处理模块依赖、代码分割、压缩、文件指纹等工作，使得最终生成的打包文件体积更小，加载速度更快。

  4. 插件系统：Vue CLI 提供了插件系统，允许你轻松地扩展项目的功能。你可以使用 Vue CLI 官方提供的插件，如 Vuex（状态管理库）、Vue Router（路由器）等，也可以开发自定义插件来满足特定需求。

  5. 单元测试和端到端测试：Vue CLI 集成了测试工具，包括 Jest（用于单元测试）和 Nightwatch（用于端到端测试）。你可以使用这些工具来编写和运行测试用例，确保项目的质量和稳定性。

  6. 项目部署：Vue CLI 提供了快速的项目部署功能。它可以帮助你生成生产环境所需的最终打包文件，并提供了构建结果分析、代码压缩等功能，以便于你将应用程序部署到生产环境中。

环境准备

Node.js支持 https://nodejs.org/dist/v20.9.0/node-v20.9.0-x64.msi

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

环境变量

在这里插入图片描述

在这里插入图片描述

安装Node.js淘宝镜像加速器（cnpm）

npm install cnpm -g

在这里插入图片描述

在这里插入图片描述

安装vue-cli

cnpm install vue-cli -g

在这里插入图片描述

检验安装

vue list

在这里插入图片描述

第一个vue-cli

E:\VUE笔记\vue-student>vue init webpack myvue'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
�������ļ�
? Project name myvue      // 项目名称
? Project description A Vue.js project    // 项目描述
? Author SIN   // 项目作者
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) novue-cli · Generated "myvue".# Project initialization finished!
# ========================To get started:cd myvuenpm install (or if using yarn: yarn)npm run devDocumentation can be found at https://vuejs-templates.github.io/webpack

在这里插入图片描述

在这里插入图片描述

初始化并运行

cd myvue
npm install
npm run dev

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

项目目录解析

demovue                   -------> 项目名称-build                 -------> 用来使用webpack打包使用build依赖            -config                -------> 用来做整个项目配置目录-node_modules          -------> 管理项目中使用依赖-src                   -------> 用来编写vue的源代码|+ assets          -------> 存放静态资源|+ components      -------> 编写vue组件|+ App.vue         -------> 根目录组件|+ main.js         -------> 根目录主入口-static                -------> 存放其他静态资源.babelrc               -------> 将es6转换为es5.editorconfig          -------> 项目编辑配置.gitignore             -------> get配置.postcssrc.js          -------> 源代码项目jsindex.html             -------> 项目主页package.json           -------> 类似pom.xml文件 依赖管理，不建议手动添加package-lock.json      -------> 对package.json文件加锁README.md              -------> 项目说明书

第一个案例

我们在vue-cli项目中主要是以vue组件形式来编写，编写位置位于：src/components下

分析：

<!-- 编写组件的页面结构。包含：组件的布局，内容的结构，定义组件的外观和展示
-->
<template></template><!-- 编写组件的JavaScript代码逻辑包含：组件的属性，组件的方法，组件的生命周期，定义组件的行为和功能等
-->
<script>export default {name: "组件名称"}
</script><!-- 编写组件的样式信息，包含：组件的Css样式，定义组件的外观和样式。
-->
<style scoped></style>

编写：

DemoTest.vue

<template><div class="box">{{vueData1}}</div>
</template><script>export default {name: "DemoTest",data(){return{vueData1: "这是使用vue-cli编写的第一个案例"}}}
</script><style scoped>.box{background-color: red;}
</style>

主入口调用

App.vue是项目的主入口，需要将编写的组件在主入口中注册并调用，才能在页面中显示出来

<template><div><!--调用组件--><DemoTest/></div>
</template><script>// 引入组件import DemoTest from "@/components/DemoTest";export default {name: 'App',components: {// 注册组件DemoTest}}
</script><style></style>

在命令行中启动项目 ： npm run dev 命令来启动项目

在这里插入图片描述

在这里插入图片描述

超链接

Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 深度集成，可以帮助构建单页面应用程序。通过 Vue Router，可以实现页面之间的切换、路由参数传递、嵌套路由等功能。

安装vue-router

npm install vue-router@^3.5.3

src/router下创建index.js文件

import Vue from 'vue';
import Router from 'vue-router';
import StudentAdd from "@/components/StudentAdd";
import StudentList from "@/components/StudentList";Vue.use(Router);export default new Router({mode: 'history', // 如果需要使用 history 模式，则在此设置base: process.env.BASE_URL, // 设置 baseroutes: [{path: '/student-add',name: 'StudentAdd',component: StudentAdd},{path: '/',name: 'StudentList',component: StudentList}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Docker】docker安装

【Docker】docker安装

需要云服务器等云产品来学习Linux可以移步/-->腾讯云<--/官网&#xff0c;轻量型云服务器低至112元/年&#xff0c;新用户首次下单享超低折扣。 目录 一、Ubuntu安装docker 1、查看操作系统和CPU架构 2、卸载docker 3、配置docker下载源 4、安装docker 5、解决报错…
阅读更多...
【STM32 物联网】AT指令与TCP，发送与接收数据

【STM32 物联网】AT指令与TCP，发送与接收数据

文章目录 前言一、连接TCP服务器1.1 配置Wifi模式1.2 连接路由器1.3 查询ESP8266设备IP地址1.4 连接TCP服务器 二、向服务器接收数据和发送数据2.1 发送数据2.2 接收数据 总结 前言 随着物联网&#xff08;IoT&#xff09;技术的迅速发展&#xff0c;越来越多的设备和系统开始…
阅读更多...
政安晨：【完全零基础】认知人工智能（二）【超级简单】的【机器学习神经网络】—— 底层算法

政安晨：【完全零基础】认知人工智能（二）【超级简单】的【机器学习神经网络】—— 底层算法

如果小伙伴第一次看到这篇文章&#xff0c;可以先浏览一下我这个系列的上一篇文章&#xff1a; 政安晨&#xff1a;【完全零基础】认知人工智能&#xff08;一&#xff09;【超级简单】的【机器学习神经网络】 —— 预测机https://blog.csdn.net/snowdenkeke/article/details/…
阅读更多...
阿里云服务器CPU内存配置怎么选择够用?

阿里云服务器CPU内存配置怎么选择够用?

阿里云服务器配置怎么选择&#xff1f;根据实际使用场景选择&#xff0c;个人搭建网站可选2核2G配置&#xff0c;访问量大的话可以选择2核4G配置&#xff0c;企业部署Java、Python等开发环境可以选择2核8G配置&#xff0c;企业数据库、Web应用或APP可以选择4核8G配置或4核16G配…
阅读更多...
技能下载中：Sora视频让机器人秒学任何技艺！

技能下载中：Sora视频让机器人秒学任何技艺！

引言 在机器人成为平凡工匠和前沿先驱的时代&#xff0c;我们正站在新黎明的边缘。本文将探讨斯坦福大学的通用操作接口&#xff08;UMI&#xff09;及其与OpenAI的Sora如何共同推进机器人技术&#xff0c;开创未来学习的新纪元。 正文 斯坦福的通用操作接口&#xff08;UMI…
阅读更多...
WildCard：一个因太好用而被迫暂停服务的虚拟信用卡平台，魅力何在？

WildCard：一个因太好用而被迫暂停服务的虚拟信用卡平台，魅力何在？

如果你需要使用Wildcard开通GPT4、Midjourney或是Only方式的话&#xff0c;请点击&#xff1a;WildCard使用教程 参考文章链接&#xff1a;WildCard&#xff1a;一个因太好用而被迫暂停服务的虚拟信用卡平台&#xff0c;魅力何在&#xff1f; 1、Wildcard用户数量激增&#x…
阅读更多...
Windows 编译 yangfengzzz/fluid-engine-OpenVDB

Windows 编译 yangfengzzz/fluid-engine-OpenVDB

我想将 OpenVDB 接入 doyubkim 的流体引擎 https://github.com/doyubkim/fluid-engine-dev 然后搜到已经有人做过这件事了 https://github.com/yangfengzzz/fluid-engine-OpenVDB Windows 编译 yangfengzzz/fluid-engine-OpenVDB 但是我是 windows&#xff0c;所以想要编译…
阅读更多...
MySQL系列之索引入门（下）

MySQL系列之索引入门（下）

前言 通过上文&#xff0c;我想各位盆友已熟悉MySQL的索引分类及其含义&#xff0c;那么如何合理的使用呢&#xff1f; 请继续围观此文&#xff0c;一探究竟&#xff01; 一、创建索引 首先&#xff0c;我们一起学习索引是如何创建的&#xff0c;又有哪些方式。 1. create t…
阅读更多...
VO、DTO、DO、BO、PO

VO、DTO、DO、BO、PO

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 VO、DTO、DO、BO1.概念阿里Java开发手册分层领域模型&#xff1a; 2. VO 和 DTO 使用场景以下是一个使用VO和DTO的典型案例&#xff1a; 3.BO和DTO的区别 案例 VO、…
阅读更多...
数据结构1.0（基础）

数据结构1.0（基础）

近java的介绍&#xff0c; 文章目录 第一章、数据结构1、数据结构 &#xff1f;2、常用的数据结构数据结构&#xff1f; 逻辑结构and物理结构 第二章、数据结构基本介绍2.1、数组&#xff08;Array&#xff09;2.2、堆栈&#xff08;Stack&#xff09;2.3、队列&#xff08;Que…
阅读更多...
宝塔安装MySQL、设置MySQL密码、设置navicat连接

宝塔安装MySQL、设置MySQL密码、设置navicat连接

1、登录宝塔面板进行安装 2、设置MySQL连接密码 3、安装好了设置navicat连接 登录MySQL [roothecs-394544 ~]# mysql -uroot -p Enter password: 切换到MySQL数据 mysql> use mysql Database changed mysql> 查询用户信息 mysql> select host,user from user; ---…
阅读更多...
数据脱敏(四)脱敏算法-替换算法

数据脱敏(四)脱敏算法-替换算法

脱敏算法篇使用阿里云数据脱敏算法为模板,使用算子平台快速搭建流程来展示数据 "替换脱敏"是一种数据处理技术&#xff0c;主要用于保护个人隐私和数据安全。它通过将敏感信息&#xff08;如姓名、身份证号、电话号码等&#xff09;替换为无意义或随机的字符&#xf…
阅读更多...
完整的 vue-router 导航解析流程

完整的 vue-router 导航解析流程

在Vue.js中&#xff0c;vue-router是一个官方提供的路由管理器&#xff0c;它能够帮助我们实现页面之间的无缝切换和导航。 本文将深入探讨vue-router的导航解析流程&#xff0c;并通过示例代码演示如何使用vue-router实现完整的导航过程。 首先&#xff0c;让我们来了解一下…
阅读更多...
Linux环境安装Maven（详细图文）

Linux环境安装Maven（详细图文）

目录 摘要 一、准备工作 1.检查当前环境是否安装maven 2.下载maven ​3.上传maven压缩包 4.解压maven包 5.移动到/usr/local目录下方便管理 6.配置maven环境变量 7.刷新配置文件 8.配置maven镜像仓库 9.验证是否成功 摘要 笔者Linux环境为&#xff1a;Ubuntu 22.04 …
阅读更多...
解决Webstorm2023使用账号连接GitLab的问题personal access token instead of a password

解决Webstorm2023使用账号连接GitLab的问题personal access token instead of a password

问题 升级Webstorm之后&#xff0c;发现gitlab仓库拉取代码报错 报错信息 remote: HTTP Basic: Access denied. The provided password or token is incorrect or your account has 2FA enabled and you must use a personal access token instead of a password. See https…
阅读更多...
【论文精读】BERT

【论文精读】BERT

摘要 以往的预训练语言表示应用于下游任务时的策略有基于特征和微调两种。其中基于特征的方法如ELMo使用基于上下文的预训练词嵌入拼接特定于任务的架构&#xff1b;基于微调的方法如GPT使用未标记的文本进行预训练&#xff0c;并针对有监督的下游任务进行微调。 但上述两种策略…
阅读更多...
kettle中JavaScript使用例子

kettle中JavaScript使用例子

1.将输入日期减一后&#xff0c;得到对应格式的输出 输入为20240216则Alert输出20240215 日期减一。 对应函数参考&#xff1a; https://blog.csdn.net/doasmaster/article/details/112978529
阅读更多...
Windows11(非WSL)安装Installing llama-cpp-python with GPU Support

Windows11(非WSL)安装Installing llama-cpp-python with GPU Support

直接安装&#xff0c;只支持CPU。想支持GPU&#xff0c;麻烦一些。 1. 安装CUDA Toolkit (NVIDIA CUDA Toolkit (available at https://developer.nvidia.com/cuda-downloads) 2. 安装如下物件&#xff1a; gitpythoncmakeVisual Studio Community (make sure you install t…
阅读更多...
day03-股票数据报表与导出

day03-股票数据报表与导出

day03-股票数据表报与导出 目标 理解涨幅榜业务需求;理解涨停跌停概念&#xff0c;并涨停跌停基本实现;理解涨停跌停SQL分析流程&#xff0c;并根据接口文档自定义实现;理解echarts基本使用;掌握easyExcel基本使用,并实现涨幅榜数据导出功能; 第一章 股票涨幅统计 1、涨幅榜…
阅读更多...
【spring】@Transactional 注解失效的原因及解决办法

【spring】@Transactional 注解失效的原因及解决办法

文章目录 前言一、Transactional 属性介绍1.事务的传播行为&#xff1a;propagation2.事务的隔离级别&#xff1a;isolation3.事务的超时时间&#xff1a;timeout4.事务的回滚类型&#xff1a;rollbackFor 二、Transactional 失效场景1.同一个类中方法调用&#xff0c;注解失效…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023