前端之Vue配置

简介: 为了便于学习,本篇博客将会在评论区抽出一位幸运观众送出Vue.js全家桶一本书。书籍介绍请看文末。


文章目录


为了便于学习,本篇博客将会在评论区抽出一位幸运观众送出Vue.js全家桶一本书。书籍介绍请看文末。


前端之Vue配置

本教程基于vue3进行讲解

不要担心学了没用,xue你学前后端都是用的到的

本来呢,在阅读本教程之前,你应该具备以下知识:

  • HTML
  • css
  • JavaScript

不过本篇博客并不涉及复杂代码,放心食用~~

毕竟hello world还是要的


1. vue是什么

基于官方了解:

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

简单了解:

vue是一个前端框架,他的功能是简化我们的开发流程,能够让我们快速的开发页面。

说实在的,你现在不了解也没事,毕竟你只要会用,慢慢就了解了


2. vue的优点

vue是基于MVVM的框架,vue就是组件化的框架,这么做的优点是:前后端分离,易于开发,解耦度高。

说实在的,你现在不了解也没事,毕竟你只要会用,慢慢就了解了


3. vue的安装

  1. 简单安装

就像jQuery一样,你只需要将其源码下载下来,使用script标签导入就可以了。

源码地址

点击,复制源代码,然后自己找个文件,粘贴进去即可

  1. 先学会上面这个就行了~~想了解别的方式就自行查阅吧


4. 创建一个目录

在你的文件夹里面,创建一个项目目录(以后学习用,今天先搞hello world),命名你可以随意。

然后创建两个文件夹:jss,css用于用于存放js脚本和css样式。

然后创建一个html文件,命名为index,用于项目首页。


5. Hello World

在IT界,万物皆有Hello World~

编辑器使用vs code这个我就不用多说了吧

在vs code打开你刚刚创建的项目:

  1. 左上角File->Open Folder
  2. 找到你的项目路径,点击打开
  3. 打开index.html文件
  4. 编写如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue_HelloWorld</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="hello">
        {{ a }}  <!-- 类似于变量,用于显示字符串,可以随意修改,但是大括号不能变  -->
    </div>
    <script>
        const hello = {  // 定义一个函数,用于显示变量所代表的字符串
            data(){      // 它是一个函数,具体效果不用管,他是必须要有的
                return{
                    a: "Hello World!I'm Vue!"  // 将字符串赋值给a
                }
            }
        }
        Vue.createApp(hello).mount("#hello")    // 使用vue,并通过ID选择器将div选择
    </script>
</body>
</html>
  1. F5运行你的HTML文件,就可以看到字符串了


书籍介绍

【书籍封面】

image.png

【参考文案】

  1. 技术全面、完整、系统—对标企业项目技术栈
  2. 讲解详细、通俗易懂——分析循序渐进且逻辑强
  3. 有学习讨论交流群——快速成为前端工程师

【内容简介】

Vue.js 是一套构建用户界面的渐进式框架,本书旨在帮助读者全面掌握 Vue.js 全家桶技术和单页面前后端分离项目开发,理解 MVVM 框架思想,让前端和后端开发人员快速精通 Vue.js 全家桶技术。

本书贯穿入门准备实操、基础核心案例、中级进阶实战、综合进阶项目进行讲解,循序渐进、环环相扣,通俗易懂,并分析为什么这样使用,让你知其所以然。包含的主要技术:NPM/CNPM、VS  Code、Vue.js、 MVVM、Axios、Vue Router、webpack、ECMAScript 6、Vue Loader、Vue  CLI、Element UI、Vuex、 Mock.js、Easy Mock、ECharts  、Promise、拦截器、组件通信、跨域问题、上线部署等。

本书适合有 HTML、CSS、JavaScript 基础的 Vue.js  零基础小白、前端开发人员、后端开发人员。同时,也适合以下人员阅读:在校生,需要掌握流行的新技术,做到与职场同步;在职人员,工作中需要学习使用Vue;有基础学员,需要系统、全面、高效使用  Vue 技术。

【作者简介】

徐照兴,  2020年取得首届江西省普通本科高校金牌教授,高级项目经理,51CTO学院特级讲师,CSDN学院、腾讯课堂、网易云课堂、淘宝教育等在线教育平台讲师。主要研究领域为计算机应用技术教学、Web数据库应用程序开发、智能信息系统开发。任教的课程获批江西省在线精品开放课程、江西省线上线下混合式一流课程;指导学生参加省级以上赛事,多次获一等奖、二等奖、三等奖,笔者获优秀指导教师;以主持人身份获中国纺织工业联合会教学成果奖二等奖、三等奖各1项,校级教学成果奖一等奖、二等奖各1项。获实用专利6项新型、软件著作登记权20余项。

京东自营购买链接

https://item.m.jd.com/product/13441784.html

当当自营购买链接

http://product.dangdang.com/29303081.html



目录
相关文章
|
4天前
|
JavaScript
在Vue中使用Avue、配置过程以及实际应用
这篇文章介绍了作者在Vue项目中集成Avue组件库的完整过程,包括安装、配置和实际应用,展示了如何利用Avue实现动态表单和数据展示的功能。
在Vue中使用Avue、配置过程以及实际应用
|
4天前
|
JavaScript
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
这篇文章介绍了如何在Vue 2或Vue 3项目中实现一个自定义的全局指令`v-dragSwitch`,用于创建可以任意方向拖拽并悬浮的元素,同时包含边界处理的逻辑。
22 2
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
|
5天前
|
前端开发 JavaScript API
前端框架Vue------>第二天学习(1)插槽
这篇文章介绍了Vue框架中插槽(slot)的概念和用法,以及如何在组件中使用自定义事件进行父子组件间的通信。
前端框架Vue------>第二天学习(1)插槽
|
5天前
|
JSON 前端开发 JavaScript
前端框架Vue------>第一天学习(3)
这篇文章是关于使用Vue框架进行前端开发的教程,重点介绍了如何使用Axios实现异步通信和表单输入的双向数据绑定。
前端框架Vue------>第一天学习(3)
|
5天前
|
前端开发 JavaScript API
前端框架Vue------>第一天学习(2) v-if
这篇文章介绍了Vue框架中条件渲染的用法,包括`v-if`、`v-else-if`指令的使用,以及列表渲染和事件监听的基本实现。
前端框架Vue------>第一天学习(2) v-if
|
3天前
|
前端开发 JavaScript Java
SpringBoot+Vue+token实现(表单+图片)上传、图片地址保存到数据库。上传图片保存位置自己定义、图片可以在前端回显(一))
这篇文章详细介绍了在SpringBoot+Vue项目中实现表单和图片上传的完整流程,包括前端上传、后端接口处理、数据库保存图片路径,以及前端图片回显的方法,同时探讨了图片资源映射、token验证、过滤器配置等相关问题。
|
3天前
|
前端开发 数据库
SpringBoot+Vue+token实现(表单+图片)上传、图片地址保存到数据库。上传图片保存位置到项目中的静态资源下、图片可以在前端回显(二))
这篇文章是关于如何在SpringBoot+Vue+token的环境下实现表单和图片上传的优化篇,主要改进是将图片保存位置从磁盘指定位置改为项目中的静态资源目录,使得图片资源可以跨环境访问,并在前端正确回显。
|
4天前
|
负载均衡 前端开发 应用服务中间件
使用Nginx配置SSL以及部署前端项目
本文介绍了如何使用Nginx配置SSL证书以启用HTTPS,并展示了如何通过Nginx部署前端项目,包括配置SSL证书、设置代理和负载均衡的示例。
19 2
|
4天前
|
JavaScript 开发工具 git
Vue学习之--------脚手架的分析、Ref属性、Props配置(2022/7/28)
这篇文章分析了Vue脚手架的结构,并详细讲解了`ref`属性和`Props`配置的基础知识、代码实现和测试效果,展示了如何在Vue组件中使用`ref`获取DOM元素或组件实例,以及如何通过`Props`传递和接收外部数据。
Vue学习之--------脚手架的分析、Ref属性、Props配置(2022/7/28)
|
5天前
|
存储 前端开发 JavaScript
Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
本文介绍了使用Springboot后端和Vue前端实现图片与表单数据一起提交到后端,并保存图片地址到数据库,然后展示存储的图片到前端Vue页面的完整流程。
Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面