vue框架-vue-cli

news2025/1/21 22:09:55

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) no

   vue-cli · Generated "myvue".

# Project initialization finished!
# ========================

To get started:

  cd myvue
  npm install (or if using yarn: yarn)
  npm run dev

Documentation 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          -------> 源代码项目js
    index.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, // 设置 base
    routes: [
        {
   
            path: '/student-add',
            name: 'StudentAdd',
            component: StudentAdd
        },
        {
   
            path: '/',
            name: 'StudentList',
            component: StudentList
        }
  

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

15.一种坍缩式的简单——组合模式详解

当曾经的孩子们慢慢步入社会才知道&#xff0c;那年味渐淡的春节就像是疾驰在人生路上的暂停键。 它允许你在隆隆的鞭炮声中静下心来&#xff0c;瞻前顾后&#xff0c;怅然若失。 也允许你在寂静的街道上屏气凝神&#xff0c;倾听自己胸腔里的那团人声鼎沸。 孩子们会明白的&am…

信息安全认证 | CISP证书怎么样?值得考吗?

HCIE考证研究所的朋友们&#xff0c;新年快乐&#xff01; 今天给大家说说CISP证书&#xff0c;新的一年祝大家逢考必过啊~ 01 考注册信息安全工程师证书的用处 CISP证书可作为学识和技能证明&#xff1b;求职、任职、晋升、加薪的资格凭证&#xff1b;用人单位招聘、录用劳动…

论文精读--对比学习论文综述

InstDisc 提出了个体判别任务&#xff0c;而且利用这个代理任务与NCE Loss去做对比学习从而得到了不错的无监督表征学习的结果&#xff1b;同时提出了别的数据结构——Memory Bank来存储大量负样本&#xff1b;解决如何对特征进行动量式的更新 翻译&#xff1a; 有监督学习的…

Instagram 账号被封如何申诉?ins账号解封经验分享

不知道各位在玩转海外社媒平台时有没有遇到过Instagram账号异常的情况&#xff0c;比如会出现账号受限、帖子发不出去、账号被封号等情况?Instagram账号如果被封不用马上弃用&#xff0c;我们可以先尝试一下申诉&#xff0c;看看能不能把账号解封。所以今天将会出一篇Instagra…

19.Qt 组合框的实现和应用

目录 前言&#xff1a; 技能&#xff1a; 内容&#xff1a; 1. 界面 2.槽 3.样式表 参考&#xff1a; 前言&#xff1a; 学习QCombox控件的使用 技能&#xff1a; 简单实现组合框效果 内容&#xff1a; 1. 界面 在ui编辑界面找到input widget里面的comboBox&#xff…

如何使用HTTP隧道在Linux环境下构建内网穿透解决方案

你是否曾经遇到过这样的尴尬场景&#xff1a;身处内网环境&#xff0c;却想要让外部世界的朋友访问你的某个服务&#xff0c;却发现那堵墙——防火墙&#xff0c;如同一座不可逾越的山峰&#xff0c;挡住了你的去路&#xff1f;别担心&#xff0c;今天我们就来聊聊如何在Linux环…

ad18学习笔记十八:如何单独设置某一铺铜与导线的间距

网上找的很多内容都是ad18之前的旧版本&#xff0c;ad18对应的介绍特别少。 直接设置全局的铺铜规格比较容易&#xff1a; Altium Designer教程系列&#xff1a;深入学习铺铜操作 (baidu.com) Altium Designer规则及覆铜设计小技巧 (baidu.com) 单独给某一片铺铜区域设置规则…

中国传媒网CEO徐晓艺:第六届世界布商大会启幕 共探全球纺织业转型与合作

日前,2023国际纺织制造商联合会中国绍兴柯桥大会、2023第六届世界布商大会在浙江绍兴柯桥启幕,来自全球55个国家和地区的纺织行业代表围绕“绿色、循环、数字化——纺织工业新动源”主题,共探全球纺织业转型与合作。 “当前,纺织服装行业进入变革期,以数字、绿色为特征的产业变…

day 20 (标准IO 与 文件IO)

标准IO与文件IO的区别 标准IO和文件IO的区别&#xff1a;1.标准IO是库函数,是对系统调用的封装2.文件IO是系统调用,是Linux内核中的函数接口3.标准IO是有缓存的4.文件IO是没有缓存的IO:b cd - 标准IOl s p文件IO:1.操作步骤&#xff1a;打开 -> 读/写 -> 关闭2.打开文件…

运行错误(竞赛遇到的问题)

在代码提交时会遇见这样的错误&#xff1a; 此处运行错误不同于编译错误和答案错误&#xff0c;运行错误是指是由于在代码运行时发生错误&#xff0c;运行错误可能是由于逻辑错误、数据问题、资源问题等原因引起的。这些错误可能导致程序在运行时出现异常、崩溃。 导致不会显示…

数据库架构师之道:MySQL安装与系统整合指南

目录 MySQL数据库安装&#xff08;centos&#xff09; 版本选择 企业版 社区版 选哪个 MySQL特点 MySQL服务端-客户端 mysql下载选择 软件包解释 安装MySQL的方式 rpm包安装 yum方式安装 源码编译安装★ 具体的编译安装步骤★★ 环境准备 free -m命令 cat /pr…

概率基础——几何分布

概率基础——几何分布 介绍 在统计学中&#xff0c;几何分布是描述了在一系列独立同分布的伯努利试验中&#xff0c;第一次成功所需的试验次数的概率分布。在连续抛掷硬币的试验中&#xff0c;每次抛掷结果为正面向上的概率为 p p p&#xff0c;反面向上的概率为 1 − p 1-p …

基于python的遥感影像灰色关联矩阵纹理特征计算

遥感影像纹理特征是描述影像中像素间空间关系的统计特征&#xff0c;常用于地物分类、目标识别和变化检测等遥感应用中。常见的纹理特征计算方式包括灰度共生矩阵&#xff08;GLCM&#xff09;、灰度差异矩阵&#xff08;GLDM&#xff09;、灰度不均匀性矩阵&#xff08;GLRLM&…

蓝桥杯Java组备赛(二)

题目1 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int max Integer.MIN_VALUE;int min Integer.MAX_VALUE;double sum 0;for(int i0;i<n;i) {int x sc.nextInt()…

IDEA配置Lombok不起作用

IDEA配置Lombok不起作用 我们通常会只用lombok来简化代码。但是使用IDEA的lombok插件时&#xff0c;Lombok并不起作用。 可以按照如下操作。 FIle -> settings ->build,excecution,deployment–>compiler–>annotation processors勾选上 enable annotation proc…

可视化低代码表单设计器

JNPF 表单设计器是一款在线可视化表单建模工具&#xff0c;基于VueSpringboot技术开发&#xff0c;具有组件丰富、操作简单、所见即所得等特性&#xff0c;既能够设计普通的数据录入表单&#xff0c;也能够配合流程设计出各类审批流转表单。 应用地址&#xff1a;https://www.j…

单调栈题目总结

单调栈 496. 下一个更大元素 I 503. 下一个更大元素 II 739. 每日温度 6227. 下一个更大元素 IV 模版归纳 「单调栈」顾名思义就是具有单调性的栈结构&#xff0c;一般常用于找到下一个更大的元素&#xff0c;即当前元素右侧第一个更大的元素 看下面一个例子&#xff1a…

【C++学习手札】多态:掌握面向对象编程的动态绑定与继承机制(初识)

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;世界上的另一个我 1:02━━━━━━️&#x1f49f;──────── 3:58 &#x1f504; ◀️ ⏸ ▶️ ☰ &am…

应用回归分析:岭回归

岭回归&#xff0c;也称为Tikhonov正则化&#xff0c;是一种专门用于处理多重共线性问题的回归分析技术。多重共线性是指模型中的自变量高度相关&#xff0c;这种高度的相关性会导致普通最小二乘法&#xff08;OLS&#xff09;估计的回归系数变得非常不稳定&#xff0c;甚至无法…