vue.js

2022-02-21 03:31:59

（一）Vue的概念

      Vue是一个JavaScript库，和jQuery类似

（二）Vue的安装

        Vue的安装分为三种：

         1.直接下载Vue.js文件，然后通过<script>标签引入HTML（和jQuery的使用方法一样）

         2.使用CND方式；

         3.使用npm方式：

           npm（Node Package Manager），是一个node.js包管理和分发的工具。由于Node.js已经集成了npm，所以只要安装Node.js,NPM也就一起安装好了。

          安装npm：1》下载Node.js。进入Node.js官网（https://nodejs.org）

                           vue.js              

                         2》下载Node.js

                           上面有两个版本，前者是长期支持版本，比较稳定；

                                                   后者是最新版本，包含最新的特性，自然也可能存在一些bug。

                                                  但是对于前端开发者而言，我们主要是使用绑定在Nodej.s中的NPM进行Vue的安装和第三方依赖的管理，并不会基于Node.js进行开发，因此这两个版本选择哪一个都是可以的。

                          比如我们选择前面的LTS：点击——>下载——>下载成功开始安装——>

                          vue.js

 

                        3》安装成功后，打开命令提示窗口，分别输入如下的命令

                             vue.js

 

                            表明Node.js和NPM都已经安装成功。如果要使用最新版本的NPM，可执行下面的命令：

                           npm install  npm@latest -g

                         4》使用NPM安装Vue

                           NPM包分为本地安装和全局安装。代码如下所示：

                            本地安装：npm install vue

                           全局安装：npm install vue -g

                           本地安装包：1.本地安装将包安装到./node_modules目录下(.代表运行npm命令时所在的目录)。

                                             2. 可以通过 require() 来引入本地安装的包。

                           全局安装包  1.c:\users\当前登录Windows系统的账户名\AppData\Roaming\npm目录下。

                                            2.可以直接在命令行里使用。

                         5》使用 package.json

                            package.json 位于模块的目录下，用于定义包的属性。接下来让我们来看下 vue 包的 package.json 文件，位于 node_modules/vue/package.json 内容：

                           

{
  "_args": [
    [
      {
        "raw": "vue",
        "scope": null,
        "escapedName": "vue",
        "name": "vue",
        "rawSpec": "",
        "spec": "latest",
        "type": "tag"
      },
      "/Users/ccfyyn"
    ]
  ],
  "_cnpm_publish_time": 1623059739243,
  "_from": "vue@latest",
  "_hasShrinkwrap": false,
  "_id": "vue@2.6.14",
  "_inCache": true,
  "_location": "/vue",
  "_nodeVersion": "14.16.1",
  "_npmOperationalInternal": {
    "host": "s3://npm-registry-packages",
    "tmp": "tmp/vue_2.6.14_1623059738943_0.6565053664665048"
  },
  "_npmUser": {
    "name": "posva",
    "email": "posva13@gmail.com"
  },
  "_npmVersion": "6.14.12",
  "_phantomChildren": {},
  "_requested": {
    "raw": "vue",
    "scope": null,
    "escapedName": "vue",
    "name": "vue",
    "rawSpec": "",
    "spec": "latest",
    "type": "tag"
  },
  "_requiredBy": [
    "#USER"
  ],
  "_resolved": "https://registry.nlark.com/vue/download/vue-2.6.14.tgz",
  "_shasum": "e51aa5250250d569a3fbad3a8a5a687d6036e235",
  "_shrinkwrap": null,
  "_spec": "vue",
  "_where": "/Users/ccfyyn",
  "author": {
    "name": "Evan You"
  },
  "bugs": {
    "url": "https://github.com/vuejs/vue/issues"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "dependencies": {},
  "description": "",
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-jsx": "^7.0.0",
    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/register": "^7.0.0",
    "@types/node": "^12.12.0",
    "@types/webpack": "^4.4.22",
    "acorn": "^5.2.1",
    "babel-eslint": "^10.0.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^8.0.4",
    "babel-plugin-istanbul": "^5.1.0",
    "babel-plugin-transform-vue-jsx": "^4.0.1",
    "babel-preset-flow-vue": "^1.0.0",
    "buble": "^0.19.3",
    "chalk": "^2.3.0",
    "chromedriver": "^2.45.0",
    "codecov": "^3.0.0",
    "commitizen": "^2.9.6",
    "conventional-changelog": "^1.1.3",
    "cross-spawn": "^6.0.5",
    "cz-conventional-changelog": "^2.0.0",
    "de-indent": "^1.0.2",
    "es6-promise": "^4.1.0",
    "escodegen": "^1.8.1",
    "eslint": "^5.7.0",
    "eslint-plugin-flowtype": "^2.34.0",
    "eslint-plugin-jasmine": "^2.8.4",
    "file-loader": "^3.0.1",
    "flow-bin": "^0.61.0",
    "hash-sum": "^1.0.2",
    "he": "^1.1.1",
    "http-server": "^0.12.3",
    "jasmine": "^2.99.0",
    "jasmine-core": "^2.99.0",
    "karma": "^3.1.1",
    "karma-chrome-launcher": "^2.1.1",
    "karma-coverage": "^1.1.1",
    "karma-firefox-launcher": "^1.0.1",
    "karma-jasmine": "^1.1.0",
    "karma-mocha-reporter": "^2.2.3",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-safari-launcher": "^1.0.0",
    "karma-sauce-launcher": "^2.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^4.0.0-rc.2",
    "lint-staged": "^8.0.0",
    "lodash": "^4.17.4",
    "lodash.template": "^4.4.0",
    "lodash.uniq": "^4.5.0",
    "lru-cache": "^5.1.1",
    "nightwatch": "^0.9.16",
    "nightwatch-helpers": "^1.2.0",
    "phantomjs-prebuilt": "^2.1.14",
    "puppeteer": "^1.11.0",
    "resolve": "^1.3.3",
    "rollup": "^1.0.0",
    "rollup-plugin-alias": "^1.3.1",
    "rollup-plugin-buble": "^0.19.6",
    "rollup-plugin-commonjs": "^9.2.0",
    "rollup-plugin-flow-no-whitespace": "^1.0.0",
    "rollup-plugin-node-resolve": "^4.0.0",
    "rollup-plugin-replace": "^2.0.0",
    "selenium-server": "^2.53.1",
    "serialize-javascript": "^3.1.0",
    "shelljs": "^0.8.1",
    "terser": "^3.10.2",
    "typescript": "^3.6.4",
    "webpack": "~4.28.4",
    "weex-js-runtime": "^0.23.6",
    "weex-styler": "^0.3.0",
    "yorkie": "^2.0.0"
  },
  "directories": {},
  "dist": {
    "shasum": "e51aa5250250d569a3fbad3a8a5a687d6036e235",
    "size": 848560,
    "noattachment": false,
    "tarball": "https://registry.nlark.com/vue/download/vue-2.6.14.tgz"
  },
  "gitHead": "612fb89547711cacb030a3893a0065b785802860",
  "gitHooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "node scripts/verify-commit-msg.js"
  },
  "homepage": "https://github.com/vuejs/vue#readme",
  "jsdelivr": "dist/vue.js",
  "keywords": [
    "vue"
  ],
  "license": "MIT",
  "lint-staged": {
    "*.js": [
      "eslint --fix",
      "git add"
    ]
  },
  "main": "dist/vue.runtime.common.js",
  "maintainers": [
    {
      "name": "posva",
      "email": "posva13@gmail.com"
    },
    {
      "name": "yyx990803",
      "email": "yyx990803@gmail.com"
    }
  ],
  "module": "dist/vue.runtime.esm.js",
  "name": "vue",
  "optionalDependencies": {},
  "publish_time": 1623059739243,
  "readme": "ERROR: No README data found!",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/vuejs/vue.git"
  },
  "scripts": {
    "bench:ssr": "npm run build:ssr && node benchmarks/ssr/renderToString.js && node benchmarks/ssr/renderToStream.js",
    "build": "node scripts/build.js",
    "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
    "build:weex": "npm run build -- weex",
    "commit": "git-cz",
    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
    "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs-dev",
    "dev:compiler": "rollup -w -c scripts/config.js --environment TARGET:web-compiler ",
    "dev:esm": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm",
    "dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:web-server-renderer",
    "dev:test": "karma start test/unit/karma.dev.config.js",
    "dev:weex": "rollup -w -c scripts/config.js --environment TARGET:weex-framework",
    "dev:weex:compiler": "rollup -w -c scripts/config.js --environment TARGET:weex-compiler ",
    "dev:weex:factory": "rollup -w -c scripts/config.js --environment TARGET:weex-factory",
    "flow": "flow check",
    "lint": "eslint src scripts test",
    "release": "bash scripts/release.sh",
    "release:note": "node scripts/gen-release-note.js",
    "release:weex": "bash scripts/release-weex.sh",
    "sauce": "karma start test/unit/karma.sauce.config.js",
    "test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr && npm run test:weex",
    "test:cover": "karma start test/unit/karma.cover.config.js",
    "test:e2e": "npm run build -- web-full-prod,web-server-basic-renderer && node test/e2e/runner.js",
    "test:sauce": "npm run sauce -- 0 && npm run sauce -- 1 && npm run sauce -- 2",
    "test:ssr": "npm run build:ssr && jasmine JASMINE_CONFIG_PATH=test/ssr/jasmine.js",
    "test:types": "tsc -p ./types/test/tsconfig.json",
    "test:unit": "karma start test/unit/karma.unit.config.js",
    "test:weex": "npm run build:weex && jasmine JASMINE_CONFIG_PATH=test/weex/jasmine.js"
  },
  "sideEffects": false,
  "typings": "types/index.d.ts",
  "unpkg": "dist/vue.js",
  "version": "2.6.14"
}             

      Package.json 属性说明

  • name - 包名。

  • version - 包的版本号。

  • description - 包的描述。

  • homepage - 包的官网 url 。

  • author - 包的作者姓名。

  • contributors - 包的其他贡献者姓名。

  • dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。

  • repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。

  • main - main 字段指定了程序的主入口文件，require(‘moduleName‘) 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。

  • keywords - 关键字

  •  

（三）

vue.js

上一篇：③.kubernetes Label Label标签选择器


下一篇：http请求中文乱码问题