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.hqwc.cn/news/475353.html

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

相关文章

[Docker实战] 旭日X3派上Docker Openwrt +Samba 实现局域网NAS 开启AP模式

[Docker实战] 旭日X3派上Docker Openwrt +Samba 实现局域网NAS 开启AP模式

​ &#x1f308; 博客个人主页&#xff1a;Chris在Coding &#x1f3a5; 本文所属专栏&#xff1a;[旭日X3派] [Docker实战] ❤️ 前置学习专栏&#xff1a;[Linux学习] ⏰ 我们仍在旅途 …
阅读更多...
milvus insert api的数据结构源码分析

milvus insert api的数据结构源码分析

insert api的数据结构 一个完整的insert例子: import numpy as np from pymilvus import (connections,FieldSchema, CollectionSchema, DataType,Collection, )num_entities, dim 10, 3print("start connecting to Milvus") connections.connect("default&q…
阅读更多...
CSS概述 | CSS的引入方式 | 选择器

CSS概述 | CSS的引入方式 | 选择器

文章目录 1.CSS概述2.CSS的引入方式2.1.内部样式表2.2.行内样式表2.3.外部样式表 3.选择器 1.CSS概述 CSS&#xff0c;全称Cascading Style Sheets&#xff08;层叠样式表&#xff09;&#xff0c;是一种用来设置HTML&#xff08;或XML等&#xff09;文档样式的语言。CSS的主要…
阅读更多...
全网超全的测试类型详解，再也不怕面试答不出来了！

全网超全的测试类型详解，再也不怕面试答不出来了！

在软件测试工作过程中或者在面试过程中经常会被问到一些看起来简单但是总是有些回答不上的问题&#xff0c;比如你说说“黑盒测试和白盒测试的区别&#xff1f;”&#xff0c;“你们公司做灰度测试么&#xff1f;", ”α测试和β测试有什么不一样&#xff1f;“&#xff0…
阅读更多...
基于JAVA(springboot)后台微信外出务工人员信息管理小程序系统设计与实现

基于JAVA(springboot)后台微信外出务工人员信息管理小程序系统设计与实现

博主介绍&#xff1a;黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者&#xff0c;CSDN博客专家&#xff0c;在线教育专家&#xff0c;CSDN钻石讲师&#xff1b;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程&#xff…
阅读更多...
python 基础知识点（蓝桥杯python科目个人复习计划44）

python 基础知识点（蓝桥杯python科目个人复习计划44）

今日复习内容&#xff1a;做真题 复习动态规划 完全背包问题是背包问题的一个重要变体。 1.问题描述 给定一个背包&#xff0c;容量为C&#xff0c;一组物品&#xff0c;每个物品有自己的重量wi和价值vi&#xff0c;完全背包问题要求在不超过背包容量的情况下&#xff0c;放…
阅读更多...
基于51/STM32单片机的智能药盒 物联网定时吃药 药品分类

基于51/STM32单片机的智能药盒 物联网定时吃药 药品分类

功能介绍 以51/STM32单片机作为主控系统&#xff1b; LCD1602液晶显示当前时间、温湿度、药品重量 3次吃药时间、药品类目和药品数量 HX711压力采集当前药品重量 红外感应当前药盒是否打开 DS1302时钟芯片显示当前年月日、时分秒、星期 DHT11采集当前环境温度和湿度 …
阅读更多...
反射的作用

反射的作用

获取一个类里面所有的信息&#xff0c;获取到了之后&#xff0c;再执行其他的业务逻辑结合配置文件&#xff0c;动态的创建对象并调用方法 练习1&#xff1a; public class MyTest {public static void main(String[] args) throws IllegalAccessException, IOException {Stude…
阅读更多...
SQL25 查找山东大学或者性别为男生的信息（union用法）

SQL25 查找山东大学或者性别为男生的信息（union用法）

代码 select device_id , gender , age , gpa from user_profile where university 山东大学 UNION ALL select device_id , gender , age , gpa from user_profile where gender male知识点 在使用 Union 时&#xff0c;如果不需要删除重复行&#xff0c;或者结果集中的重…
阅读更多...
EXCEL中不错的xlookup函数

EXCEL中不错的xlookup函数

excel中一般要经常用vlookup函数&#xff0c;但其实经常麻烦要正序&#xff0c;从左边到右边&#xff0c;还要数列&#xff0c;挺麻烦的&#xff0c;xlookup的函数还不错&#xff0c;有个不错的一套视频介绍,B站的&#xff0c;地址是&#xff1a;XLOOKUP函数基础用法&#xff0…
阅读更多...
【OpenAI Sora】怎么启用：详细教程与使用指南(OpenAI Sora怎么启用)

【OpenAI Sora】怎么启用：详细教程与使用指南(OpenAI Sora怎么启用)

OpenAI Sora的启用方法&#xff1a;详细教程与使用指南 OpenAI Sora是一种新的AI大模型&#xff0c;可以根据简单的文本提示生成逼真和富有想象力的60秒视频。用户可以通过以下步骤启用OpenAI Sora&#xff1a; 最新消息&#xff1a;本文是设想的方式&#xff0c;但 Sora 目前…
阅读更多...
Redis：常用数据类型及其应用场景

Redis：常用数据类型及其应用场景

Redis中常见的数据类型有五种&#xff1a;String&#xff08;字符串&#xff09;&#xff0c;Hash&#xff08;哈希&#xff09;&#xff0c;List&#xff08;列表&#xff09;&#xff0c;Set&#xff08;集合&#xff09;、Zset&#xff08;有序集合&#xff09;。下面我来分…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023