Заавар

Суулгах заавар

Нийцтэй байдалын тэмдэглэл

Vue нь IE8 аас доош хувилбартай хөтөчүүдийг дэмжихгүй, учир нь IE8 хөтөч нь ECMAScript 5-ийн боломжуудыг ашиглах боломжгүй. Гэсэн хэдий ч ECMAScript 5-тай зохицдог бүх хөтөч дээр ажиллах боломжтой.

Хувилбарын мэдээлэл

Хамгийн сүүлийн тогтвортой хувилбар: 2.6.10

Хувилбар бүрийн дэлгэрэнгүй мэдээлэлтэй дараах холбоосоор танилцана уу GitHub.

Vue Devtools

Vue ашиглах үед, өөрийн хөтөч дээрээ Vue Devtools суулгахыг таньд санал болгож байна, энэхүү багаж нь таны хөгжүүлж буй Vue аппликэйнийн хялбар интэрфэйс дээр inspect болон debug хийх боломжийг олгоно.

Шууд <script> tag-аар нэмэх

Хамгийн энгийн татаж суулгах арга нь script tag-аар. Vue нь global хувьсагчаар бүртгэгдэх болно.

Хөгжүүлэлтийн явцад minified хувилбаруудыг бүү ашигла. Түгээмэл алдаануудын анхааруулгуудыг харах боломжгүй болох болно.


Хөгжүүлэлтийн хувилбарБүх анхааруулгууд болон debug хийх горим

Production хувилбарАнхааруулгууд хасагдсан, 30.90KB min+gzip

CDN

Та prototype болон сургалтын зорилгоор хамгийн сүүлийн хувилбарыг ашиглаж болно:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Production хөгжүүлэлтийн хувьд, тусгай хувилбарын дугаарыг ашиглахыг бид зөвлөж байна. Учир нь шинэ хувилбарууд дээр ямар нэг гэнэтийн алдаа гарахаас зайлхийж байгаа юм:

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

Хэрвээ native ES Module-ууд ашиглаж байгаа бол, ES Modules-д тохиромжтой хувилбар бас байдаг:

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.0/dist/vue.esm.browser.js'
</script>

Та NPM багцын эх кодыг дараах холбоосоор үзэж болно cdn.jsdelivr.net/npm/vue.

Vue-ийг мөн дараах байдлаар ашиглах боломжтой unpkg болон cdnjs (cdnjs дээр сүүлийн хувилбарууд sync хийгдээгүй байж болно).

Vue-ийн бусад builds -ийн тухай уншиж production
хувилбар өөрийн published сайт дээр vue.js болон vue.min.js зэргээр сольж ашиглаарай . Энэ нь илүү жижиг хэмжээтэйгээс гадна хурдан ажиллах болно.

NPM

Том хэмжээний програмуудыг Vue-тэй хөгжүүлэхэд NPM ашиглан суулгахыг зөвлөж байна. Энэ нь Webpack болон Browserify гэх мэт module bundler-уудтай сайн зохицож ажилладаг. Vue нь мөн дагалдах багажуудыг зохиож ашиглах боломж олгодог Single File Components.

# latest stable
$ npm install vue

CLI

Vue нь албан ёсны CLI байдаг ба энэ Single Page Application хөгжүүлэхэд маш том суурь чухал үүрэгтэй багаж болдог. Энэ нь таны frontend хөгжүүлэлтийн орчины суурь бүтцийг хялбар гаргах боломж олгодог. Та хэдхэн минут зарцуулаад hot-reload, lint-on-save, болон production болгоход бэлэн вэб програмын суурь бэлдэх боломжтой. Vue CLI ийн заавар бичиг баримттай дэлгэрэнгүй танилцах.

Та CLI ашиглахын тулд Node.js болон түүнтэй холбоотой багаж хэрэгслүүдийн талаар мэдлэгтэй байх хэрэгтэй. Хэрэв та шинээр Vue болон front-end build tools зэргийн шинээр ашиглаж эхлэх гэж байгаа бол CLI ашиглахын өмнө эхлээд энэхүү зааварыг ашиглахыг санал болгож байна.

Vue Mastery дээр тайлбар бичлэгийг үзээрэй

Өөр хувилбаруудын тайлбар

NPM багцын dist/ хавтас дотор Vue.js-ийн олон төрлийн хувилбар байгааг та харж болно. Тэд нарын хоорондын ялгааны тухай энд оруулав:

UMD CommonJS ES Module (for bundlers) ES Module (for browsers)
Full vue.js vue.common.js vue.esm.js vue.esm.browser.js
Runtime-only vue.runtime.js vue.runtime.common.js vue.runtime.esm.js -
Full (production) vue.min.js - - vue.esm.browser.min.js
Runtime-only (production) vue.runtime.min.js - - -

Нэр томьёо

Runtime + Compiler vs. Runtime-only

Хэрэв та клиент дээр template compile хийх шаардлагатай (жишээлбэл, загвар руу тэмдэгт дамжуулах эсвэл HTML загвар ашиглан DOM-ийн дотор элемент холбоход), та compiler болон full build хэрэгтэй болно:

// энэ нь compiler буюу хөрвүүлэгч шаарддаг
new Vue({
  template: '<div>{{ сайн уу }}</div>'
})

// энэ бол хэрэггүй
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

vue-loader эсвэл vueify ашиглаж байх үед * .vue файл доторх загвар нь JavaScript build хийхээс өмнө compile хийгдсэн байдаг. Та эцсийн багцад хөрвүүлэгчийг заавал ашиглах шаардлагагүй бөгөөд зөвхөн runtime-only хувилбар ашиглах нь тохиромжтой.

Runtime-only хувилбар нь бүтэн хувилбараас 30% илүү бага хэмжээтэй байдаг тул ашиглахад илүү тохирмжтой. Хэрэв та бүтэн хувилбарыг ашиглахыг хүсэж байгаа бол та өөрийн bundler-ийн alias-г тохируулах хэрэгтэй:

Webpack

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' webpack 1 ашиглаж байгаа бол
    }
  }
}

Rollup

const alias = require('rollup-plugin-alias')

rollup({
  // ...
  plugins: [
    alias({
      'vue': require.resolve('vue/dist/vue.esm.js')
    })
  ]
})

Browserify

Add to your project’s package.json:

{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

Parcel

Add to your project’s package.json:

{
  // ...
  "alias": {
    "vue" : "./node_modules/vue/dist/vue.common.js"
  }
}

Development vs. Production горим

Development/production горимыг UMD бүтээхэд хатуу кодчилдог/hard-coded/ : un-minified файлууд нь development горим зориулагддаг бөгөөд minified файлууд нь production горимд ашиглахад зориулагдсан.

CommonJS болон ES модулиуд нь тухайн bundler-т зориулагдсан учраас бид тэдэнд зориулж minified хувилбаруудыг хангаж өгөх боломжгүй. Та эцсийн багцыг өөрөө багасгах үүрэгтэй.

CommonJS болон ES модуль нь ажиллуулах горимыг тодорхойлохын тулд process.env.NODE_ENV-д raw check-уудыг хадгалах. Vue нь ямар горимд ажиллахыг хянахын тулд тухайн орчны тохиргооны хувьсагчуудыг сольж тохируулах ёстой. process.env.NODE_ENV нь зөвхөн тэмдэгт мөр буюу string утга бичиж өгөх боломжтой учир хөгжүүлэлтийн горимд UglifyJS гэх мэт minifiers ашиглан кодын хэмжээгээ багасгадаг.

Webpack

Webpack 4+, дээр та mode сонголтыг ашиглах боломжтой:

module.exports = {
  mode: 'production'
}

Гэвч Webpack 3 болон түүнээс өмнөх хувилбарууд дээр DefinePlugin ашиглах хэрэгтэй:

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ]
}

Rollup

Ашиглах: rollup-plugin-replace:

const replace = require('rollup-plugin-replace')

rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}).then(...)

Browserify

Өөрийн bundle-д глобалаар envify тохиргоо хийх.

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

Мөн үзэх Сэрвэрт байршуулах зөвлөмжүүд.

CSP environments

Google Chrome Апп зэрэг зарим орчнууд нь Мэдээллийн аюулгүй байдлын (CSP) үүднээс new Function() -ийг ашиглахыг хориглодог. Full build template compile хийх боломжийг агуулдаг учраас эдгээр орчинд ашиглагдах боломжгүй.

Нөгөө талаас, зөвхөн ажиллах runtime-only build нь бүрэн CSP-тэй нийцдэг. Runtime-only хувилбар [Webpack + vue-loader] (https://github.com/vuejs-templates/webpack-simple) эсвэл [Browserify + vueify] (https://github.com/vuejs-templates / browser-simple) зэрэгтэй хамт ашиглахад таны template render функцууд нь CSP орчнуудад төгс ажиллах болно.

Dev Build

Чухал: GitHub-ийн /dist хавтсанд байгаа build хийсэн файлууд нь зөвхөн release хийх үед шалгагддаг. GitHub дээрх хамгийн сүүлийн эх кодоос Vue ашиглахын тулд та үүнийг өөрөө build хийх хэрэгтэй болно!!

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

Bower

Bower ашиглаж байгаа бол зөвхөн UMD хувилбар ашиглах боломжтой.

# хамгийн сүүлийн үеийн тогтвортой хувилбар
$ bower install vue

AMD Module Loaders

Бүх UMD хувилбарыг шууд AMD модул болгон ашиглаж болно.

Танилцуулга →
Ямар нэг алдаа дутагдалтай эсвэл баримт бичигт хувь нэмрээ оруулахыг хүсч байна уу? GitHub дээр энэхүү хуудасыг засаарай!