前端之Vue配置

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

布小禅

13760人浏览 · 2021-10-28 17:13:54

布小禅 · 2021-10-28 17:13:54 发布

文章目录

前端之Vue配置
书籍介绍

为了便于学习，本篇博客将会在评论区抽出一位幸运观众送出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的安装

简单安装

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

源码地址

点击，复制源代码，然后自己找个文件，粘贴进去即可
先学会上面这个就行了~~想了解别的方式就自行查阅吧

4. 创建一个目录

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

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

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

5. Hello World

在IT界，万物皆有Hello World~

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

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

左上角File->Open Folder
找到你的项目路径，点击打开
打开index.html文件

编写如下代码：

<!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>

F5运行你的HTML文件，就可以看到字符串了

书籍介绍

【书籍封面】
在这里插入图片描述

【参考文案】

技术全面、完整、系统—对标企业项目技术栈

讲解详细、通俗易懂——分析循序渐进且逻辑强

有学习讨论交流群——快速成为前端工程师

【内容简介】

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

关注下方公众号，更多精彩内容等你来探索

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^