Vue.js 是什么

ctolib 发布于1月前 阅读1235次
0 条评论

安装

去官网找 installation 关键字,你会看到这个页面(注意看网址):
英文:https://vuejs.org/v2/guide/installation.html#NPM
中文:https://cn.vuejs.org/v2/guide/installation.html#NPM

copy 它给的命令,在我们任务一的项目目录里运行(最好把任务一的代码复制一份,改名为任务二):

npm install vue

如果你注意看文档里的解释(点右上角的「Translations」有中文文档),你会发现有两个构建版本(不是 Vue 1 和 Vue 2,而是 standalone 和 runtime-only ),但是两个版本效果不同。你现在只要记住我们下面使用的 Vue 是 「独立构建」(standalone build)版本就行了,另一个版本以后学。

按照文档,我们需要添加 webpack 配置(下面是修改后的 webpack.config.js):

module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015&presets[]=react'
      },
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  }
}

解决警告

安装 vue 时,你的控制台有很多警告,如下:

npm http request GET https://registry.npm.taobao.org/vue
npm http 200 https://registry.npm.taobao.org/vue
/Users/frank/jrg/jrg-project-5/step-2
├── vue@2.1.8
└── UNMET PEER DEPENDENCY webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc

npm WARN enoent ENOENT: no such file or directory, open '/Users/frank/jrg/jrg-project-5/step-2/package.json'
npm WARN babel-loader@6.2.10 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
npm WARN step-2 No description
npm WARN step-2 No repository field.
npm WARN step-2 No README data
npm WARN step-2 No license field.

npm WARN step-2 No xxx

最后四行警告说我们没有 description、repository field、README data 和 license field。
要解决这个问题,我们必须要有如下几个文件:

  • package.json
  • README.md
  1. package.json

    使用 npm init 可以创建一个初始的 package.json,你敲完这个命令之后,npm 会问你很多问题,方便起见,我们先不回答,一路回车就行(你看得懂也可以回答一下)。

    This utility will walk you through creating a package.json file.
    It only covers the most common items, and tries to guess sensible defaults.
    
    See `npm help json` for definitive documentation on these fields
    and exactly what they do.
    
    Use `npm install <pkg> --save` afterwards to install a package and
    save it as a dependency in the package.json file.
    
    Press ^C at any time to quit.
    name: (step-2)
    version: (1.0.0)
    description:
    entry point: (app.js)
    test command:
    git repository:
    keywords:
    author:
    license: (ISC)
    About to write to /Users/frank/jrg/jrg-project-5/step-2/package.json:
    
    {
      "name": "step-2",
      "version": "1.0.0",
      "description": "",
      "main": "app.js",
      "dependencies": {
      },
      "devDependencies": {},
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }
    
    
    Is this ok? (yes)
    

    这时 package.json 就创建好了,你需要

    1. 把里面的 description 改一下
    2. 如果你这个目录有对应的 git 远程仓库的话,你也可以加上 repository 字段,只需要把 FrankFang/xxx 改成你的仓库名就行了。

    文件结果如下:

    {
      "name": "step-2",
      "version": "1.0.0",
      "description": "A vue.js demo",
      "main": "app.js",
      "dependencies": {
      },
      "repository": {
        "type": "git",
        "url": "git+https://github.com/FrankFang/xxx.git"
      },
      "devDependencies": {},
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }
    
    
  2. README.md

    这个文件对于开源项目来说非常重要,只是你现在还不知道怎么写而已。那么我们就创建一个空文件来掩盖这个警告吧:

    touch README.md
    

    重新运行 npm i vue 是不是警告变少了:

    # npm i vue
    npm http request GET https://registry.npm.taobao.org/vue
    npm http 304 https://registry.npm.taobao.org/vue
    step-2@1.0.0 /Users/frank/jrg/jrg-project-5/step-2
    ├── vue@2.1.8
    └── UNMET PEER DEPENDENCY webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc
    
    npm WARN babel-loader@6.2.10 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
    npm WARN step-2@1.0.0 No repository field.
    

警告 babel-loader@6.2.10 requires a peer of webpack

记不记得上一篇教程我要你全局安装 webpack 命令:

npm i -g webpack

同样,任何想要启动你的项目的人,都必须全局安装 webpack。如果他忘了安装,那么这个项目根本就无法运行。这就很麻烦了。你需要在 README.md 里警告其他人一定要安装 webpack 才行。

npm 想了另一个办法来解决这个麻烦,把你依赖的命令都声明在 package.json 里:

npm i -S webpack vue babel-loader babel-core babel-preset-es2015 babel-preset-react

运行之后,我们依赖的所有包(任务一需要的包我也写在上面了),都会被安装,同时 package.json 的 dependencies 字段,会记录这些包的名字和版本,就像这样:

// 这是 package.json 文件的内容
{
  省略...
  "main": "app.js",
  "dependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "vue": "^2.1.8",
    "webpack": "^1.14.0"
  },
  省略...
}

好处:

  1. 别人 git clone 你的项目之后,只需要运行 npm i 就可以安装你指定的包
  2. 不需要全局安装 webpack 了,转而使用 ./node_modules/.bin/webpack 这个文件作为 webpack 命令(原来命令就是文件啊?你才知道)

我们来试一下:

# ./node_modules/.bin/webpack
Hash: 61a3dfaceb637bce005a
Version: webpack 1.14.0
Time: 627ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.83 kB       0  [emitted]  main
    + 2 hidden modules

然后你就可以把全局安装的 webpack 卸载掉了。(不过没必要卸载)

至此就没有警告了。其实程序员从来都不在乎警告的 

copy-run-modify Vue

  1. Copy

    先抄 https://cn.vuejs.org/v2/guide/#起步
    先不要管你抄的东西是什么意思。

    改写 page.html
    <html>
      <head>
      </head>
      <body>
        <div id="app">
          {{ message }}
        </div>
    
        <script src="bundle.js"></script>
      </body>
    </html>
    
    
    改写 app.js 
    import bar from './bar';
    
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })                                                               
    
  2. Run

    然后运行 webpack,打开 page.html

    看到浏览器控制台报错:

    Uncaught ReferenceError: Vue is not defined
    

    app.js 里的 Vue 确实不知道是从哪来的,仿照 import bar from './bar',我们在 app.js 里加一句import Vue from 'vue',结果如下:

    import bar from './bar'
    import Vue from 'vue'
    
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })                                                               
    
    

    然后运行 webpack,刷新 page.html。

    没有报错,页面看起来是这样:

Modify

现在我们来看看我们 copy 了些什么玩意。

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
  1. div 里的 {{message}} 怎么变成了 Hello Vue!

    看起来 Hello Vue! 和 message 有某种对应关系,那么我们把 Hello Vue! 改成 Hello Frank! 试试。

    改完之后保存,运行 webpack,刷新 page.html,页面变成了:

    看来我们的猜测是对的,data 的 message 与页面中的 {{message}} 存在绑定关系。

    接下来我们可以继续「猜测」,然后通过 modify 来验证。

  2. div id="app" 与 el: '#app'

    我们猜测 div id="app" 与 el: '#app' 有对应关系,那么我们试着把 div 的 id=app 改成 id=xxx。

    改 HTML 是不需要运行 webpack 的,然后我们直接刷新 page.html 试试:

    果然报错,找不到 #app,说明我们的猜测正确。

你还可以继续猜,然后 modify,比如改 data、改 el 等。

每次改完 JS 你都要运行 webpack 重新打包。

至此,Vue 的 Hello World 我们就做出来了。

转自:https://github.com/jirengu-inc/jrg-project-5/issues/2

共收到0条回复

需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。