专栏首页程序员爱酸奶一、Vue 世界初探

一、Vue 世界初探

前言

我们后端用SpringBoot 框架已经搭建的差不多了之前,既然我们最初的梦想是做先后端分离的架手架,终于也开始学习一下前端的框架了。自己也算是前端小白,所以将自己学习vue 的过程记录系列博客。希望对学习vue 的小伙伴有帮助,如果文章中有不对的,希望大家及时提出一起探讨。

至于为什么要使用vue ,虽然是一个前端小白,但是还是知道当前主流的三大框架,Angular、React以及Vue .优劣我就不说了,我就说说我为什么选择vue 吧。其实还是因为毕竟是后端开发,对前端的东西不要求深入理解,做到能用能复制就好了。所以基本上是本着最小学习成本来的。所以相对Angular 和React来说,vue 算是上手最快的,所以也就入坑了。自己花了一周的时间预研,勉强算自己入门了吧,所以才开始写博客记录下来,这样也算是对自己学习的内容的整理,也可以记录下来方便大家。

学习地址

想要了解vue 是什么, 怎么学习?我也是参考网上的资料学习的。

vue.js 的官网:https://cn.vuejs.org/v2/guide/

菜鸟教程:https://www.runoob.com/vue2/vue-tutorial.html

gitBook: http://vue_book.siwei.me/preface.html

自己感觉官网上和菜鸟教程上,对自己的作用只是熟悉的了vue的语法,不足以我来搭建在项目中使用,但是又不能不看,不然基本的语法都不知道,怎么开展下一步。上面的gitBook 算是带我入门的,我也在网上找了很多资料,但是跟着gitBook一步步实现起来,整体流程算是清楚了,所以也推荐大家。自己记录这系列博客,也算自己vue入门吧,有不对的地方大家多多指教。

安装

好啦,说了这么多,我们正式开始吧。我们直接使用vue-cli .当然大家亦可以使用其他的。我们首先电脑上 npm和git 并配置邮箱 ,至于怎么安装,网上有很多教程,这里就不说了,安装好之后,我们需要安装vue-cli 。

npm install vue vue-cli -g

安装好之后,我们控制台我们想要创建项目的目录执行:

vue init webpack zlflovemmVue

这样就可以看到项目已经初始化成功了。我们现在用IDEA 打开这个项目,当然大家也可以用其他的,后端的用惯了idea ,所以也就用idea 来开发vue 啦。

IDEA 配置vue

我们既然使用idea,当然需要一些配置,不使用idea 的可以忽略。1、我们打开settings 下载vue.js 插件,然后重启。打开我们创建的项目zlflovemmVue

2、配置js 版本 ECMAScript6

3、HTML 增加 .vue 支持

4、启动项目,在edit Configurations 中增加npm 启动,配置如下图:

配置好后,我们来启动就好啦,如下图就表示启动成功啦。

我们启动成后,在浏览器上输入:

 http://localhost:8081

证明我们项目已经初始化搭建完成啦。到这里我们已经完成了第一步。但是可以看到我们到现在为止还没有开始写代码,也不知道如何下手写。

不要急,我们前面这些工作做好后,我们接下来就开始啦。

项目结构

虽然我们项目稀里糊涂的启动起来了,但是相比到此的小伙伴还是一头雾水,在那写我们的代码呢?整个流程是怎么样的呢?在写代码之前,我们还是先来看看,vue-cli 初始化为我们创建的项目有哪些东西。

▸ build/                // 编译用到的脚本
▸ config/               // 各种配置
▸ dist/                 // 打包后的文件夹
▸ node_modules/         // node第三方包
▸ src/                  // 源代码
▸ static/               // 静态文件, 暂时无用
  index.html            // 最外层文件
  package.json          // node项目配置文件

build

保留各种打包脚本。不可或缺,不要随意修改。

展开后如下:

▾ build/
    build.js                  //打包使用, 不要修改。
    check-versions.js        //检查npm的版本, 不要修改。
    dev-client.js            //是在开发时使用的服务器脚本。不要修改。
    dev-server.js           //同上
    utils.js                // 不要修改。做一些css/sass 等文件的生成。
    vue-loader.conf.js     //非常重要的配置文件,不要修改。内容是用来辅助加载vuejs用到的css source map等内容。
    webpack.base.conf.js     //下面这三个都是基本的配置文件。不要修改
    webpack.dev.conf.js
    webpack.prod.conf.js

我们初学者阶段,暂时不用管这些,也不改这些东西。

config

上图我们可以看到config 目录中就有

▾ config/
    dev.env.js
    index.js
    prod.env.js
        test.env.js

dev.env.js 开发模式下的配置文件,一般不用修改。prod.env.js 生产模式下的配置文件,一般不用修改。test.env.js 测试模式下的配置文件,一般不用修改。index.js 很重要的文件, 定义了 开发时的端口(默认是8080),定义了图片文件夹(默认static), 定义了开发模式下的 代理服务器. 我们修改的还是比较多的。

node_modules

node项目所用到的第三方包,特别多,特别大。$ npm install 所产生。这个文件夹不要放到git中

src

最最核心的源代码所在的目录。我们要写的代码就是写在这个里面啦。

▾ src/
  ▾ assets/
      logo.png
  ▾ components/
      Hello.vue
  ▾ router/
      index.js
    App.vue
    main.js

assets: 用到的图片

components: 用到的"视图"和"组件"所在的文件夹。(最最核心)

router/index.js 路由文件。定义了各个页面对应的url.

App.vue 如果index.html 是一级页面模板的话,这个App.vue就是二级页面模板。所有的其他vuejs页面,都作为该模板的 一部分被渲染出来。

main.js 废代码。没有实际意义,但是为了支撑整个vuejs框架,存在很必要。

Hello World

好啦,我们已经知道了项目的结构了,现在就要开始实现我们自己的hello world 啦。不然我们当程序员还有什么意义。其实我们程序已经帮我们写了一个helloworld 。但是我们还是自己来创建一个,这样自己才能熟悉点。最终添加的内容图如下:

Hello.vue

我们在src--components 新建Hello.vue 。内容如下:

<template>
  <div>
    {{message}}
  </div>
</template>

<script>
    export default {
        data(){
          return {
            message: "hello world"
          }
        }
    }
</style>

可以看到内容很简单,就是返回一个hello world 。

修改index.js

接下来我们在src--router--index.js 中增加一个路由。

启动

这样的话我们就可以来启动项目啦。启动的时候报这种错误:

  ✘  http://eslint.org/docs/rules/indent

启用eslint检测不通过导致的,我们这里的解决办法:

在build/webpack.base.conf.js文件中,注释config.dev.useEslint?这行配置,然后重启项目就好了。

启动之后,我们在界面上输入:

 http://localhost:8081/#/hello

这里我们的hello world 出来了,但是我们可能会感觉到奇怪,我们只是仅仅写了helloworld 为什么还有logo ,并且还有居中的样式。我们这个问题留在下篇文章接着讲。这里我们先记着。

番外

到此为止,我们也算是将vue安装成功了,并运行一个非常简单的例子。

代码上传到github:https://github.com/QuellanAn/zlflovemmVue

后续加油♡

本文分享自微信公众号 - 程序员爱酸奶(gh_d6fe115dd573),作者:QuellanAn

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 二、Vue 页面渲染过程

    上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦,但是是不是感觉心虚虚的,总觉得这么多文件,项目怎么就启动起来了呢?怎么访问到8080 端口就...

    程序员爱酸奶
  • 数据库的优化方法,一般人我不告诉他(建议收藏)

    1、查询的时候尽量避免使用 * ,虽然在写sql语句的时候很方便,但是在执行sql语句的时候会耗费更多的内存和时间资源。

    程序员爱酸奶
  • 手撸一个自定义starter,它不香吗

    springboot 中有很多的starter 。我们用起来很爽不是吗,之所以这么爽难道不是因为我们少了很多配置吗,之前我们想要使用jdbcTemplete 是...

    程序员爱酸奶
  • Mysql中的条件语句if、case

    Mysql中的条件语句在我们对数据进行转换的时候比较有用,这样就不需要创建中转表。

    大江小浪
  • Node.js运行原理、高并发性能测试对比及生态圈汇总

    优点就是由于多实例机制,可以保证服务器的容错性,就算出现异常也不会使多个服务器实例同时崩溃。

    Peter谭金杰
  • LeetCode 3: 无重复字符的最长子串

    Given a string, find the length of the longest substring without repeating chara...

    爱写bug
  • LeetCode 828. 统计子串中的唯一字符(中心扩展)

    我们定义了一个函数 countUniqueChars(s) 来统计字符串 s 中的唯一字符,并返回唯一字符的个数。

    Michael阿明
  • Rxjs 响应式编程-第四章 构建完整的Web应用程序

    在本章中,我们将构建一个典型的Web应用程序,在前端和后端使用RxJS。我们将转换文档对象模型(DOM)并使用Node.js服务器中的WebSockets进行客...

    frontoldman
  • linux命令sed与awk是干什么用的

    非常强大的文本操纵工具,sed,awk,grep 这个三个命令 都是操作文本文件的 unix系统有几个特点: 对于内核而言,unix文件都是字节序列。io设备也...

    Albert陈凯
  • JavaScript 测试系列实战(一):使用 Jest 和 Enzyme 测试 React 组件

    你或许早已经知道“单元测试”“端到端测试”这些名词,但从未真正付诸实践。在这一系列实战教程中,我们将手把手带你掌握 Jest、Enzyme、Cypress 等测...

    一只图雀

扫码关注云+社区

领取腾讯云代金券