前端框架Vue学习 ——(五)前端工程化Vue-cli脚手架

文章目录

  • Vue-cli
  • Vue项目-创建
  • Vue项目-目录结构
  • Vue项目-启动
  • Vue项目-配置端口
  • Vue项目开发流程


Vue-cli

介绍:Vue-cli 是 Vue 官方提供的一个脚手架,用于快速生成一个 Vue 的项目模版
在这里插入图片描述

  • 安装 NodeJS
  • 安装 Vue-cli
npm install -g @vue/cli

Vue项目-创建

在这里插入图片描述

图形化界面

  • 在命令行输入命令 vue ui 打开图形化构建
    点击创建——再次创建新项目
    在这里插入图片描述

  • 输入项目名,取消勾选 git,点击下一步

在这里插入图片描述

  • 选择手动,点击下一步

在这里插入图片描述

  • 勾选 Router,点击下一步

在这里插入图片描述

  • 版本选择 2.x,规范选择第一个,然后点击创建项目

在这里插入图片描述

  • 项目创建成功

在这里插入图片描述

Vue项目-目录结构

在这里插入图片描述

src 下

在这里插入图片描述

Vue项目-启动

npm run serve

Vue项目-配置端口

vue.config.js中
在这里插入图片描述

Vue项目开发流程

默认页面 index.html 与 入口文件 main.js
在这里插入图片描述
render 的作用是:将 App 中所定义的视图创建出虚拟的 DOM 元素,挂载到 #app 对应的区域

VUE 项目中以 .vue 结尾的都称为组件文件。每个组件由三部分组成:、

VUE 组件
在这里插入图片描述

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

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

相关文章

Web组件

开发者使用Vue、React等框架来使用及创建定制的组件,Web组件是浏览器原生支持的替代这些框架的特性,主要涉及相对比较新的三个Web标准。这些Web标准允许JS使用新标签扩展HTML,扩展后的标签就是自成一体的、可重用的UI组件。 1 HTML模版 Docu…

15 款 PDF 编辑器帮助轻松编辑、合并PDF文档

PDF 编辑器在当今的数字环境中至关重要,因为 PDF 已成为共享和存储信息的首选格式。只需几分钟,可靠的 PDF 编辑器即可让用户能够根据其特定需求修改、定制和定制文档。在本文中,我们全面汇编了 15 款最佳免费 PDF 编辑器,让您可以…

JAVA应用中线程池设置多少合适?

目录 1、机器配置: 2、核心线程数 3、最大线程数多少合适? 4、理论基础 5、测试验证 一个线程跑满一个核心的利用率 6个线程 12 个线程:所有核的cpu利用率都跑满 有io操作 6、计算公式 7、决定最大线程数的流程: 1、机器…

【JavaScript】零碎知识点总结_2

1. 引入网站图标 可以直接放在根目录 还可以 link 引入&#xff08;推荐&#xff09; <linkrel"shortcut icon"href"./assets/favicon.ico"type"image/x-icon">2. 转换为数字 123 -> 123 除 做字符串拼接&#xff0c;算术运算符都…

中国移动发布《新型智慧城市白皮书》(2023版)

加gzh“大数据食铁兽”&#xff0c;回“20231101”&#xff0c;获取材料完整版 导读 通过本系列白皮书&#xff0c;我们系统的阐述了中国移动对中国智慧城市发展趋势&#xff0c;并对中国移动服务智慧城市建设六大核心能力进行了介绍&#xff0c;详细说明了中国移动智慧城市…

强化学习中策略的迭代

一、策略迭代 一旦使用vπ改善了策略π&#xff0c;产生了更好的策略π0&#xff0c;我们就可以计算vπ0并再次对其进行改进&#xff0c;产生更好的π00。因此&#xff0c;我们可以获得一系列单调改善的策略和值函数&#xff1a; 其中E−→表示策略评估&#xff0c;I−→表示策…

07 点积

点积 基本运算几何解释投影运算和基本运算的联系多维空间到一维空间的投影 点积的作用 这是关于3Blue1Brown "线性代数的本质"的学习笔记。 基本运算 两个维数相同的向量 [ 2 , 7 , 1 ] T , [ 8 , 2 , 8 ] T [2, 7, 1]^{T},[8, 2, 8]^{T} [2,7,1]T,[8,2,8]T,求它们…

跟着Nature Communications学作图:纹理柱状图+添加显著性标签!

&#x1f4cb;文章目录 复现图片设置工作路径和加载相关R包读取数据集数据可视化计算均值和标准差方差分析组间t-test 图a可视化过程图b可视化过程合并图ab 跟着「Nature Communications」学作图&#xff0c;今天主要通过复刻NC文章中的一张主图来巩固先前分享过的知识点&#…

D-Link监控账号密码信息泄露

访问漏洞的 url 为 /config/getuser?index0其中泄露了账号密码 使用泄露的账号密码登陆系统 文笔生疏&#xff0c;措辞浅薄&#xff0c;望各位大佬不吝赐教&#xff0c;万分感谢。 免责声明&#xff1a;由于传播或利用此文所提供的信息、技术或方法而造成的任何直接或间接的…

47基于matlab的水印提取,将水印和载体进行图像融合

基于matlab的水印提取&#xff0c;将水印和载体进行图像融合&#xff0c;成为一体&#xff0c;可对合成图像进行加噪处理&#xff0c;剪切处理&#xff0c;小波压缩处理&#xff0c;旋转处理等操作&#xff0c;最后对合成图像实现水印提取&#xff0c;程序已调通&#xff0c;可…

排序——冒泡排序

冒泡排序的基本思想 从前往后&#xff08;或从后往前&#xff09;两两比较相邻元素的值&#xff0c;若为逆序&#xff08;即 A [ i − 1 ] < A [ i ] A\left [ i-1\right ]<A\left [ i\right ] A[i−1]<A[i]&#xff09;&#xff0c;则交换它们&#xff0c;直到序列…

Web前端—网页制作(以“学成在线”为例)

版本说明 当前版本号[20231105]。 版本修改说明20231105初版 目录 文章目录 版本说明目录day07-学成在线01-项目目录02-版心居中03-布局思路04-header区域-整体布局HTML结构CSS样式 05-header区域-logo06-header区域-导航HTML结构CSS样式 07-header区域-搜索布局HTML结构CSS…