专栏首页前端路桥vue[0x01] -- Hello World

vue[0x01] -- Hello World

入门必学Hello,world。

说说难与易?

如果你看过一千部以上的电影,你就会发现,这世间根本没有什么离奇的事。为什么从后端或者说网页三剑客过来的哥们,会有觉得vue上手快,容易学的错觉?很大程度上,在早期的vue中,还是以脚本文件的形式通过script标签引入vue,而稍微懂点编程的应该也都接触过像jQuery之类的类库,可以说你是天然会,创建一个实例也很好理解,你会发现印象比较深刻的例子就是我在一个文本框输入数据楼下的显示文本也跟着变化了,数据与视图巧妙结合。前后端通过JSON进行数据交互,Ajax技术进行通信,硬憋一下也还行。那么,为啥又难了呢?前端技术发展太快了,前阵子在v站上看到一个帖说后端看不懂前端(这个笔者在目前所在公司真的有很深很深很深很深深深深的感受,也让我明白了做职业规划的重要性),其实,你找个前端过来也不一定能完全看得懂我个人认为,因为兴起的技术太特么多了,两只手怎么学的过来,若没有惊人的毅力。而且版本更新太快了,打开一个现代版的前端项目,配置文件就够你喝一壶,当然可能还有一些政治因素限制,僧多肉少的局面对源码也有一定的要求,导致难度曲线一下子就上去了,所以说比较难吧。生活不止眼前的苟且,还有你到不了的远方。加油吧,一点一点成长起来,同志们。

本地文件的引用

虽然bower已经用的不多了,但是这里为了演示我还是用个鸟。

一些关于项目用bower的前期工作

$ npm install -g bower  #全局安装bower
$ bower init  #会创建一个bower.json配置文件
$ bower install pkg #安装pkg, 例如 bower install jquery, 默认安装在bower_components下
$ bower search pkg  #搜索pkg
$ bower info pkg # 查看pkg信息,这个命令也会去下载的
$ bower list # 列出已安装的包

.bowerrc

{
    "directory": "assets/libs",
    "timeout": 120000,
    "registry": "https://registry.bower.io"
}

一般只要记楼上三个就好,字面意思就是它的作用。其他的如果有需要就去看官网,这里贴一份官网的配置参数

{
  "cwd": "~/.my-project",
  "directory": "bower_components",
  "registry": "https://registry.bower.io",
  "shorthand-resolver": "git://github.com//.git",
  "proxy": "http://proxy.local",
  "https-proxy": "http://proxy.local",
  "ca": "/var/certificate.pem",
  "color": true,
  "timeout": 60000,
  "save": true,
  "save-exact": true,
  "strict-ssl": true,
  "storage": {
    "packages" : "~/.bower/packages",
    "registry" : "~/.bower/registry",
    "links" : "~/.bower/links"
  },
  "interactive": true,
  "resolvers": [
    "mercurial-bower-resolver"
  ],
  "shallowCloneHosts": [
    "myGitHost.example.com"
  ],
  "scripts": {
    "preinstall": "",
    "postinstall": "",
    "preuninstall": ""
  },
  "ignoredDependencies": [
    "jquery"
  ]
}

vue 0.6.0

选了一个最早版本的vue感受一下,对是0.6.0.

安装: bower install vue#0.6.0

它的整个过程是这样子的,先看看本地缓存有没有,没有再去看看远程能命中吗?如果命中就下载,然后解压到指定目录。

bower vue#0.6.0             not-cached https://github.com/vuejs/vue.git#0.6.0
bower vue#0.6.0                resolve https://github.com/vuejs/vue.git#0.6.0
bower vue#0.6.0               download https://github.com/vuejs/vue/archive/0.6.0.tar.gz
bower vue#0.6.0               progress received 0.1MB
bower vue#0.6.0               progress received 0.1MB
bower vue#0.6.0               progress received 0.1MB
bower vue#0.6.0                extract archive.tar.gz
bower vue#0.6.0               resolved https://github.com/vuejs/vue.git#0.6.0
bower vue#0.6.0                install vue#0.6.0

vue#0.6.0 assets\libs\vue

之所以选择最开始的版本是因为其东西少,容易学,对初学者友好。

可以看到下载下来就一个源码一个压缩码,这里开发环境就引入vue.js,如果是部署线上生产环境那就vue.min.js

.
|-- LICENSE
|-- bower.json
`-- dist
    |-- vue.js
    `-- vue.min.js

1 directory, 4 files

唉,人生没有彩排,都是现场直播,写着写着尴尬的事情来了,我发现最开始的0.6.0貌似没有v-model,这是个尴尬的故事,楼下代码并不符合预期,不过我倒是认为这是好事,成长嘛。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue - Hello world</title>
    <script src="assets/libs/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" name="" v-model="message" id=""><br />
        <p>{{message}}</p>
    </div>
</body>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: "just do it!"
        }
    })
</script>

</html>

时间关系这个好问题我们留在vue之问专题进行探索,先安装个最新版(2.6.1)试试吧,发现当你安装两个版本它还会有冲突。

bower install vue
bower vue#*                     cached https://github.com/vuejs/vue.git#2.6.11
bower vue#*                   validate 2.6.11 against https://github.com/vuejs/vue.git#*

Unable to find a suitable version for vue, please choose one by typing one of the numbers below:
    1) vue#0.6.0 which resolved to 0.6.0 and is required by hello-world
    2) vue#^2.6.11 which resolved to 2.6.11

Prefix the choice with ! to persist it to bower.json

? Answer

换完以后你就会发现,代码一下就复杂了起来,这对初学者是不太友好的,所以我才有那个思路去找最开始版本的,发现不符合预期。

效果如下:

楼上这些大致是写给非前端的同学看的,看到这里你大致结合一些后端知识可以构建出一些应用,但你会发现还是有些问题,比如说怎么加密,怎么压缩,怎么提高性能,怎么打包,怎么控制访问权限,怎么封装组件,怎么更加规范清晰地搭建项目,别急,我们接着往下看,来看看vue-cli的打开姿势。

@vue/cli

注意: 你会发现不知道从哪个版本开始,原来有vue-cli的脚手架变成了@vue/cli,不仅仅是vue,很多框架的脚手架都是这样子的,例如gitbook。它表示特指适用于这个框架。

安装:

$ npm install -g @vue/cli  #npm方式全局安装vue脚手架
$ yarn global add @vue/cli #yarn方式全局安装vue脚手架
$ vue --version  #查看脚手架版本

两种打开姿势: 你可以输入vue ui,这样子它就会打开一个图形化界面的网站,你可以在上面进行项目的创建和配置,当然你也可以怎么样啊,直接命令行的方式,如果你不是很熟悉的话,那就选默认,如果你很熟悉了知道像什么babel、vuex、vue-router、axios、mocha或者jest,那你就自己配置,觉得也还可以就保存配置方便下次使用,使用的命令是vue create your project

创建完以后,要关注的配置文件蛮多的,首当其冲的就是package.json,我们给他来个特写

{
  "name": "vue-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "core-js": "^3.4.4",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-unit-mocha": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.0.3",
    "chai": "^4.1.2",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  }
}

给它阉割一下,你只要关注三个地方,第一个是配置脚本命令的scripts,第二个是安装的依赖库dependencies,第三个是开发环境依赖库devDependencies。后面的一些文件,我们在后续的一些文章中介绍,大致的目录长这样

这里我们来介绍一下,node_modules没什么好讲的就一些项目依赖,public下面一个是网站图标,一个是页面入口文件,重点介绍src文件夹下的那几位,assets就是一些静态资源文件,components就是vue的公共组件,router顾名思义是路由哇,store是vuex作状态管理的,views下面放的都是.vue文件的页面文件,App.vue是页面入口文件,main.js是程序入口文件,test就是测试文件夹,一些其他配置文件我们会在后续进行介绍,这个是基于vue cli 3.0的,2.0还是有很大的出入,这边优化了webpack的配置,爽。

我们通过在npm run serve这个命令就可运行我们的程序,默认脚手架生成的页面是这样子的

我们给它改造成楼上的例子,这里简要的说下一个.vue文件的组成,大致是三部分

<template>
  //这里面写你的html标签元素
</template>
<script>
  //写js逻辑
</script>
<style>
  //写css样式
</style>

这样写

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <input type="text" v-model="msg"/>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

注意点: 从这个例子不难发现,vue父子组件之间的传值用props

这样子构建项目是不是开发思路都清晰了很多,因为相信,所以看见,加油吧,同志们!

选自《Vue涂鸦》系列文章

原文地址:https://github.com/ataola/vue-Graffiti/blob/master/note/hello-world.md

参考文献:

bower文件配置:https://bower.io/docs/config/

bower包库搜索:https://bower.io/search/

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

本文分享自微信公众号 - 前端路桥(ataola),作者:丰臣正一

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

原始发表时间:2020-01-09

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue[0x03] - Vue基础实践

    抓重点讲吧,最开始可追溯的版本号是0.6.0这个,但是正式对外发布的版本是在2014年1月24日发布的0.8.0。后面就是两个打头的里程碑,一个是1.x.x,一...

    丰臣正一
  • vue[0x02] -- 基础特性

    你会发现这样一个现象,我本来时挂载到id为app的div上的,但是它并没有这么做。

    丰臣正一
  • leetcode - 最小路径和

    给定一个包含非负整数的 m x n 网格,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小。

    丰臣正一
  • 前后端通吃,vue大全Mark一下

    仓库地址:https://github.com/opendigg/awesome-github-vue

    java乐园
  • vue实践之采用vue-cli3.x创建项目

    vue.js 官方文档 https://cn.vuejs.org/v2/guide/

    陨石坠灭
  • Vue 3.0将正式发布,对我们有哪些改变?

    那么我们今天就带着大家了解下 vue3.0,到底进化了什么,会对我们的开发有什么影响?

    前端迷
  • 【程序源代码】Vue开源项目库汇总

    最近在学习VUE,感觉确实不错的前端框架。但光学习基本有点太慢,时间太长,主要是为了项目上手使用,所以在网上找了找比较好的VUE框架开发的项目实例。分享给大家。...

    程序源代码
  • 12 手写配置启动一个 vue2 项目

    2019年10月5日,vue 团队发布了 Vue3.0 预览版源码,预计到 2020 年第一季度将发布 3.0 正式版。3.0 包涵了许多激动人心的新特性。

    李艺
  • 架构图以及vue的简介

    MVVM 由 Model,View,ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表...

    Dawnzhang
  • 太原面经分享:如何在vue面试环节,展示你晋级阿里P6+的技术功底?

    一年一度紧张刺激的高考开始了,与此同时,我也没闲着,奔走在各大公司的前端面试环节,不断积累着经验,一路升级打怪。

    闰土大叔

扫码关注云+社区

领取腾讯云代金券