【原】vue[0x01] -- Hello World

nullPlus 2023-02-03 发布于浙江

展开全文

入门必学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."
}

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

{
  "cwd": "~/.my-project",
  "directory": "bower_components",
  "registry": "https://registry.",
  "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>