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;越来越多的设备和系统开始…
阅读更多...
【开源】C++ 周期任务调度的思想和实现

【开源】C++ 周期任务调度的思想和实现

​ 今天调休&#xff0c;抓住年假的最后一天&#xff0c;将构思多日适合将并行任务串行执行的框架实现出来。 核心思想&#xff1a; 将各个独立的功能模块作为周期性的任务。在主循环集中调度所有任务&#xff0c;让各个功能模块依次有处理事项的机会。如果处理事项较为耗时&…
阅读更多...
BES 平台 SDK之串口指令

BES 平台 SDK之串口指令

本文章是基于BES2700 芯片&#xff0c;其他BESxxx 芯片可做参考&#xff0c;如有不当之处&#xff0c;欢迎评论区留言指出。仅供参考学习用&#xff01; 上位机下发格式&#xff1a; 格式一&#xff1a;[A,B] 格式二&#xff1a;A:B 固定格式&#xff1a;auto_test&#xff1a…
阅读更多...
政安晨：【完全零基础】认知人工智能（二）【超级简单】的【机器学习神经网络】—— 底层算法

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

如果小伙伴第一次看到这篇文章&#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…
阅读更多...
Vite之对CSS的处理方式及使用

Vite之对CSS的处理方式及使用

Vite之对CSS的处理方式及使用 文章目录 Vite之对CSS的处理方式及使用1. 直接对CSS处理2. 使用css预处理器less 1. 直接对CSS处理 可直接导入css进行使用&#xff0c;而不需要任何配置 定义样式文件&#xff1a;myStyle.css body {background-clor:red }导入css文件 import …
阅读更多...
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;所以想要编译…
阅读更多...
ubuntu22.04-cmake-添加动态库-静态库-添加头文件夹所在位置-管理员启动

ubuntu22.04-cmake-添加动态库-静态库-添加头文件夹所在位置-管理员启动

文章目录 1.引用库命令-target_link_libraries2.命令行添加头文件夹和库文件夹所在位置3.添加头文件目录-include_directories4.target_include_directories5.生成库-add_library6.静态库-共享库7.管理员任务管理器1.引用库命令-target_link_libraries 作用 指定链接给定目标和…
阅读更多...
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、…
阅读更多...
259.【华为OD机试真题】特殊的加密算法（深度优先搜索（DFS）-JavaPythonC++JS实现）

259.【华为OD机试真题】特殊的加密算法（深度优先搜索（DFS）-JavaPythonC++JS实现）

🚀点击这里可直接跳转到本专栏，可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路，高质量解题代码(Java&Python&C++&JS分别实现)，详细代码讲解，助你深入学习，深度掌握！ 文章目录 一. 题目-特殊的加密算法二.解题思路三.题解代码Python题…
阅读更多...
js-后端返回参数前端动态切换组件样式

js-后端返回参数前端动态切换组件样式

1.js枚举 // 枚举-js //对应的icon显示 EnumUtil.Type { COMMON: 1, BUY: 2, PRODUCE: 3} 2.动态公共样式组件 <!-- 公共组件-显示对应icon --> <template><div v-html"TaskIcon(statues)" class"pro_set_task"></div> </t…
阅读更多...
数据结构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…
阅读更多...
GET 和 POST 的区别？

GET 和 POST 的区别？

get 参数通过 url 传递&#xff0c;post 放在 request body 中。 get 请求在 url 中传递的参数是有长度限制的&#xff0c;而 post 没有。 get 比 post 更不安全&#xff0c;因为参数直接暴露在 url 中&#xff0c;所以不能用来传递敏感信息。 get 请求只能进行 url 编码&am…
阅读更多...
宝塔安装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…
阅读更多...
蓝桥杯-整数删除

蓝桥杯-整数删除

给定一个长度为 N 的整数数列&#xff1a;A1, A2, ... , AN。你要重复以下操作 K 次&#xff1a; 每次选择数列中最小的整数&#xff08;如果最小值不止一个&#xff0c;选择最靠前的&#xff09;&#xff0c;将其删除。 并把与它相邻的整数加上被删除的数值。 输出 K 次操作后…
阅读更多...
最新文章

Copyright @ 2022~2023