vue-cli 脚手架详细介绍

news2024/10/6 2:31:00

4 vue-cli 脚手架

1 脚手架介绍

vue-cli也叫vue脚手架,vue-cli是vue官方提供的一个全局命令工具，这个命令可以帮助我们快速的创建一个vue项目的基础架子。

脚手架：搭建好的一个架子，我们在架子上进行开发

  • 开箱即用
  • 零配置
  • 基于webpack、webpack-dev-server

https://cli.vuejs.org/zh/guide/

2 快速入门

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

【1】切换到当前项目目录：

在这里插入图片描述

使用cd 命令切换

【2】在项目目录下执行下面的命令

cnpm install vue-cli -g    # 只需安装一次， 可以使用cnpm安装,通过

# Windows使用 `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
# work5是模块名字
vue init webpack work5

#Mac 使用
sudo vue init webpack vuedemo

##查看vue版本
vue --version
  • 在这里插入图片描述

效果：

在这里插入图片描述

在这里插入图片描述

如果安装vue脚手架之后, vue init命令无法识别, 可以尝试在vscode在任务管理器中关闭进程,再启动

在这里插入图片描述

说明：use ESLint to lint …表示代码检测，不需要，所以设置为no

  • 在这里插入图片描述

注意：时间会长一点，有可能几分钟。

下载成功后如下显示：

在这里插入图片描述

注意：在vue脚手架中文件后缀名是.vue称为组件。App.vue称为根组件。

  • 然后到模块目录下运行 (cd 工程名 )

在这里插入图片描述

npm run dev

在这里插入图片描述

浏览器访问 http://localhost:8080/#/

或者在vscode终端中按住ctrl键，点击鼠标左键即可访问，如下：

在这里插入图片描述

  • 退出服务器, 两下ctrl+c

在这里插入图片描述

3 基础介绍

3.1 服务器设置

【1】问题：为什么执行上述命令npm run dev，就可以使用浏览器访问网址?

1.使用npm命令的时候我们首先需要找到vue脚手架中的package.json文件

在这里插入图片描述

在该文件中具有webpack-dev-server，它表示开发服务器命令，该命令要读取build目录下的配置文件webpack.dev.conf.js

在这里插入图片描述

【2】webpack.dev.conf.js文件说明：

1.在这里插入图片描述

2.webpack.base.conf配置文件：

在这里插入图片描述

在这里插入图片描述

conf/index.js

注意：对于该文件我们必须掌握如何修改开发服务器的几个配置即可，上述的内容了解即可

在这里插入图片描述

proxyTable: { //代理配置(能够发送跨域请求)
      "/": {
                target: "http://localhost:8080",
                changeOrigin: true
              }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8090, //修改成8090避免跟tomcat8080冲突
    autoOpenBrowser: true, // npm run dev 自动打开浏览器

【3】修改index.js文件的参数

在这里插入图片描述

【4】在终端执行如下命令：

在这里插入图片描述

此时就会自动打开浏览器：

在这里插入图片描述

小结：

在这里插入图片描述

说明：最后我们只需要关注config目录下的index.js文件，修改内容如下：

在这里插入图片描述

3.2 目录分析

在这里插入图片描述

1. index.html是页面, 不用动,提供一个最基础的页面
2. src/main.js是入口程序, 不用动, 渲染了App.vue组件
3. src/App.vue是根组件, 默认有很多的内容，可以编辑

【1】index.html页面说明

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>work5</title>
</head>
<body>
hello vue
<div id="app"></div>
hello vue1
<!-- built files will be auto injected -->
</body>
</html>

页面效果：

在这里插入图片描述

说明：接下来我们要学习如何在index.html页面上使用标签

显示如上页面的内容。

【2】main.js

1.src/main.js是入口程序, 不用动, 渲染了App.vue组件

2.main.js文件代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
//vue脚手架需要导入vue
import Vue from 'vue'
//导入src下面的App.vue文件
import App from './App'
//这里是路由，我们下面讲解，这里先不需要知道
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
//路由
router,
//组件
components: { App },
template: '<App/>'
})

在这里插入图片描述

【3】App.vue

1.src/App.vue是根组件, 默认有很多的内容，可以编辑

2.代码

<!--
	1.template相当于body标签
-->
<template>
<div id="app">
 <img src="./assets/logo.png">
 <router-view/>
</div>
</template>
<!--书写js代码-->
<script>
export default {
name: 'App'
}
</script>
<!--书写css代码-->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

在这里插入图片描述

vue单文件组件的说明

一个.vue文件就是一个组件,后续开发vue，所有的功能都是基于组件实现。

安装插件(.vue文件才会有提示)

注意：vscode默认不支持vue,.vue文件是vue脚手架特有的，不像.html .css等通用性文件，所以需要安装如下插件

在这里插入图片描述

一个单文件组件由三部分构成

  • template(必须) 影响组件渲染的结构 html
    • 只能有一个根元素
  • script 逻辑 js
  • style 样式 css

案例 App.vue

<template>
    ·<!--书写html标签，只有一个根标签-->
  <div id="app">
    <!-- <img src="./assets/logo.png">
    <router-view/> -->
    ·<!--插值表达式-->
     <span>{{msg}}</span>
  </div>
</template>

<script>
//书写vue代码
export default {
  data(){
    return {
      msg : "hello vue"
    }
  }
}
 /*
 	以后不用这样书写了
 	new Vue({
 		data(){
 			return {
 				msg:"hello vue"
 			}
 		}
 	});
 */
</script>

<style>
  /*书写css样式*/
  span{
    color : red
  }
</style>

小结：

1.template标签中只能有一个根标签

在这里插入图片描述

2.在App.vue中以后不用再书写

new Vue({
 		data(){
 			return {
 				msg:"hello vue"
 			}
 		}
 	});

直接导出：

<script>
  export default {
  data(){
    return {
      msg:"hello vue"
    }
  }
  }
</script>

在这里插入图片描述

3.3 路由

介绍

前端的路由指的是路径和组件(.vue结尾的文件)的映射关系

【1】

在这里插入图片描述

【2】

在这里插入图片描述

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/', // 这里的路径/映射到组件component的HelloWorld
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

1.以上说明 路径 / 映射 组件HelloWorld

2.组件输出位置 用标签

在这里插入图片描述

在根组件App.vue中使用标签引入HelloWorld组件内容。

在这里插入图片描述

一般组件放在 src/views(或pages) 文件夹 和 src/components文件夹

练习

目的：页面（组件）、路由配置

需求：模拟网易云音乐

在这里插入图片描述

实现：

1、在src目录下创建 views 文件夹

2、在views文件夹下创建 userList.vue 组件文件

在这里插入图片描述

<template>
	<!--有且只有一个根标签-->
    <div>
         {{name}}
    </div>
</template>

<script>
export default {
    data(){
        return {
            name : "张三"
        }
    }
}
</script>

<style>

</style>

3、在 router/index.js 下定义页面路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import userList from '@/views/userList' //引入新的组件

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    { // 定义组件的路径
      path: '/users',//随便定义,组件路径
      name: 'userlist', //随便定义，组件名
      component: userList //需要和上面的import userList from '@/views/userList' import后面的userList一致
    }
  ]
})

说明：至于在根组件App.vue中引入哪个组件由用户在浏览器地址栏上输入哪个组件的路径决定的：

在这里插入图片描述

  1. 修改根组件App.vue

    <template>
  <div id="app">
    <img src="./assets/logo.png"> 
    <!-- 注意：这里需要加# -->
    <a href="#/">发现vue</a>
    <a href="#/users">发现好友</a><br>

    <!-- 组件的输出位置 -->
    <router-view/>

  </div>

</template>

<script>

</script>

<style>

</style>

4、控制台使用 npm run dev 运行

浏览器输入 ： http://localhost:8090/#/

在这里插入图片描述

在这里插入图片描述

# 1.对于index.html和main.js文件我们不需要修改
# 2.main.js文件引入根组件App.vue
# 3.根组件App.vue包含其他组件即components目录或者自己创建的views目录下的组件，组件以 .vue结尾的文件
# 4.修改完组件一定要修改路由
# 5.自己的图片一般存放在static目录下

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

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

相关文章

13 学习总结：指针 · 其一

13 学习总结：指针 · 其一

目录 一、内存和地址 &#xff08;一&#xff09;内存 &#xff08;二&#xff09;内存单元 &#xff08;三&#xff09;地址 &#xff08;四&#xff09;拓展&#xff1a;CPU与内存的联系 二、指针变量和地址 &#xff08;一&#xff09;创建变量的本质 &#xff08;二…
阅读更多...
【MySQL】逻辑架构与存储引擎

【MySQL】逻辑架构与存储引擎

一、逻辑架构 1、MySQL逻辑架构 我们可以根据上图来对sql的执行过程进行分析 第一步&#xff1a;客户端与服务器建立一个连接&#xff0c;从连接池中分配一个线程处理SQL语句第二步&#xff1a;SQL接口接受SQL指令第三步&#xff1a;如果是5.7版本&#xff0c;就会先去缓存中…
阅读更多...
SpringMVC（2）——controller方法参数与html表单对应

SpringMVC（2）——controller方法参数与html表单对应

controller方法参数与html表单对应 0. User实体类 import org.springframework.format.annotation.DateTimeFormat;import java.io.Serializable; import java.util.Date; import java.util.List; import java.util.Map;public class User implements Serializable {private …
阅读更多...
期末考试结束，老师该如何私发成绩？

期末考试结束，老师该如何私发成绩？

随着期末考试的落幕&#xff0c;校园里又恢复了往日的宁静。然而&#xff0c;对于老师们来说&#xff0c;这并不意味着工作的结束&#xff0c;相反&#xff0c;一系列繁琐的任务才刚刚开始。 成绩单的发放&#xff0c;就是其中一项让人头疼的工作。家长们焦急地等待着孩子的考试…
阅读更多...
【全面讲解如何安装Jupyter Notebook!】

【全面讲解如何安装Jupyter Notebook!】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…
阅读更多...
springboot三层架构详细讲解

springboot三层架构详细讲解

目录 springBoot三层架构0.简介1.各层架构1.1 Controller层1.2 Service层1.3 ServiceImpl1.4 Mapper1.5 Entity1.6 Mapper.xml 2.各层之间的联系2.1 Controller 与 Service2.2 Service 与 ServiceImpl2.3 Service 与 Mapper2.4 Mapper 与 Mapper.xml2.5 Service 与 Entity2.6 C…
阅读更多...
【Spring Boot】关系映射开发（三）：多对多映射

【Spring Boot】关系映射开发（三）：多对多映射

关系映射开发&#xff08;三&#xff09;&#xff1a;多对多映射 1.创建实体1.1 创建 Student 实体1.2 创建 Teacher 实体 2.创建测试 在 多对多 关联关系中&#xff0c;只能通过 中间表 的方式进行映射&#xff0c;不能通过增加外键来实现。 注解 ManyToMany 用于关系的发出端…
阅读更多...
【React Native优质开源项目】

【React Native优质开源项目】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…
阅读更多...
Nacos架构设计

Nacos架构设计

Nacos1.X架构设计 Nacos2.X架构修改
阅读更多...
Gitlab代码管理工具安装配置

Gitlab代码管理工具安装配置

前言&#xff1a; 没有真正的证书与域名建议使用httpip的方式在内网使用&#xff0c;不建议使用假的域名地址 一、安装前配置 #更改主机域名 hostnamectl set-hostname gitlab.dome.com bash #配置hosts 底部添加下面内容 vim /etc/hosts ############################ ip gi…
阅读更多...
昇思25天学习打卡营第19天|Diffusion扩散模型

昇思25天学习打卡营第19天|Diffusion扩散模型

学AI还能赢奖品&#xff1f;每天30分钟&#xff0c;25天打通AI任督二脉 (qq.com) Diffusion扩散模型 本文基于Hugging Face&#xff1a;The Annotated Diffusion Model一文翻译迁移而来&#xff0c;同时参考了由浅入深了解Diffusion Model一文。 本教程在Jupyter Notebook上成…
阅读更多...
【嵌入式DIY实例-ESP8266篇】-LCD ST7735显示BMP280传感器数据

【嵌入式DIY实例-ESP8266篇】-LCD ST7735显示BMP280传感器数据

LCD ST7735显示BMP280传感器数据 文章目录 LCD ST7735显示BMP280传感器数据1、硬件准备与接线2、代码实现本文介绍如何将 ESP8266 NodeMCU 板 (ESP-12E) 与 Bosch Sensortec 的 BMP280 气压和温度传感器连接。 NodeMCU 微控制器 (ESP8266EX) 从 BMP280 传感器读取温度和压力值，…
阅读更多...
人工智能在病理组学虚拟染色中的应用｜文献精析·24-07-07

人工智能在病理组学虚拟染色中的应用｜文献精析·24-07-07

小罗碎碎念 本期文献精析&#xff0c;分享的是一篇关于深度学习在虚拟染色技术中应用于组织学研究的综述。 角色姓名单位&#xff08;中文&#xff09;第一作者Leena Latonen东芬兰大学&#xff08;QS-552&#xff09;生物医学研究所通讯作者Pekka Ruusuvuori图尔库大学&#…
阅读更多...
Raw Socket（一）实现TCP三次握手

Raw Socket（一）实现TCP三次握手

实验环境&#xff1a; Windows物理机&#xff1a;192.168.1.4 WSL Ubuntu 20.04.6 LTS&#xff1a;172.19.32.196 Windows下的一个http服务器&#xff1a;HFS&#xff0c;大概长这个样子&#xff1a; 客户端就是Ubuntu&#xff0c;服务端就是这个…
阅读更多...
2024年【危险化学品生产单位安全生产管理人员】考试总结及危险化学品生产单位安全生产管理人员考试试题

2024年【危险化学品生产单位安全生产管理人员】考试总结及危险化学品生产单位安全生产管理人员考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 危险化学品生产单位安全生产管理人员考试总结是安全生产模拟考试一点通总题库中生成的一套危险化学品生产单位安全生产管理人员考试试题&#xff0c;安全生产模拟考试一点通上危险化学品生产单位安全生产管理人员作业…
阅读更多...
6、Redis系统-数据结构-05-整数

6、Redis系统-数据结构-05-整数

五、整数集合&#xff08;Intset&#xff09; 整数集合是 Redis 中 Set 对象的底层实现之一。当一个 Set 对象只包含整数值元素&#xff0c;并且元素数量不大时&#xff0c;就会使用整数集合这个数据结构作为底层实现。整数集合通过紧凑的内存布局和升级机制&#xff0c;实现了…
阅读更多...
保存在FinalShell服务器登录密码忘记了，如何快速获取到

保存在FinalShell服务器登录密码忘记了，如何快速获取到

一、从FinalShell获取服务器基本信息 如图操作会导出一个json文件&#xff0c;可以直接保存在桌面&#xff0c;或者其他位置 json格式如下&#xff1a; {"forwarding_auto_reconnect":false ,"custom_size":false ,"delete_time":0 ,"sec…
阅读更多...
python读取指定文件夹下的图片（glob获取）

python读取指定文件夹下的图片（glob获取）

python读取指定文件夹下的图片&#xff08;glob获取&#xff09; 定义traverse_images函数&#xff0c;仅需要改变下根路径即可 glob是python中用来查找符合特定规则的文件路径名的函数 import os from glob import globdef traverse_images (folder_path):image_formats …
阅读更多...
ComfyUI如何高效率使用多Lora

ComfyUI如何高效率使用多Lora

Efficient 工作流 {"last_node_id": 29,"last_link_id": 56,"nodes": [{"id": 26,"type": "LoRA Stacker","pos": [540,270],"size": {"0": 320,"1": 322},"flag…
阅读更多...
增强安全防护，解读智慧校园系统的登录日志功能

增强安全防护，解读智慧校园系统的登录日志功能

在构建智慧校园系统时&#xff0c;登录日志功能扮演着不可或缺的角色&#xff0c;它不仅是系统安全的守护者&#xff0c;也是提升管理效率和确保合规性的有力工具。这一机制详细记录每次登录尝试的方方面面&#xff0c;涵盖了时间戳、用户身份、登录来源的IP地址乃至使用的设备…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023