[翻译] vue/next 指南——01安装__Vue.js
发布于 4 年前 作者 banyungong 1481 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

原地址

发布记录

当前版本 : 3.0.0-rc.6 (😁自己去看看嘛)

各版本发布记录Github上可查

Vue DevTools (🛠开发辅助工具)

当前版本 : v6.0.0-beta1 😀

Vue Devtools for Vue 3 requires at least vue@^3.0.0-rc.1 开发工具 适合的vue3 版本至少是 vue@^3.0.0-rc1版本

When using Vue, we recommend also installing the Vue Devtools in your browser, allowing you to inspect and debug your Vue applications in a more user-friendly interface. 当使用Vue时,建议 在浏览器内 安装 开发工具 —— 可以更好的(用户友善界面…)帮助你 检查和调试 Vue应用

CDN

For prototyping or learning purposes, you can use the latest version with: 为了 原型研究/原型设计 或是 学习, 可以这样用当前版本:

<script src="https://unpkg.com/vue@next"></script>

For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions. 用于生产使用的. 建议 1.连接到 指定版本号的特定版本;2.build构建/打包 来避免意外升级引入bugs(带来的不好的事情/破坏). (当然怎么制定,就不给你们演示了.应该没人这么搞吧.)

ps. 如果真有人这么搞,或者不知道 原型设计/原型研究(prototying)是什么的.联系我🥶.

NPM

NPM is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as Webpack or Browserify. Vue also provides accompanying tools for authoring Single File Components. npm是**建议的~**安装方式——当用Vue构建大型应用的时候.(emmm.学习的时候要不要费这个劲呢?🤔). 因为: 1. 和Webpack,Browserify这些模块打包机器(没感情的吧…)完美匹配;2. Vue有一些配合写 Single File Component (就是组件~‘.vue的组件文件,你们项目components里面一大堆的那种’)的相应的工具

(ps.相应工具是啥,emmm,好问题.我也不知道,你联系我试试,可能联系我的时候我就知道了呢🥶)

# latest stable #最新稳定
$ npm install 安装 vue@next

CLI (是不是又产生了疑问,这个怎么解释,去知乎看看,有人骂你👀)

Vue provides an official CLI for quickly scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds. See the Vue CLI docs for more details. Vue提供了官方的CLI—— 来快速搭建 宏大的 单页应用 的 emm轮廓/脚手架/骨架.

  • 现代前端工作流 提供 齐备的构建设置
  • 几分钟就搭起来了,具备 热加载,lint-on-save(代码规范校验)和 (具备发布生产要求)的构建项目 好了,更多细节看这里吧.

(ps. 你会困惑的是 batteries-included吧…别问我了…看这里吧,emm或者这里.理解成开箱即用也好.工具齐备也好.)

TIP

The CLI assumes prior knowledge of Node.js and the associated build tools. If you are new to Vue or front-end build tools, we strongly suggest going through the guide without any build tools before using the CLI. 提醒💁🏿‍♂️ (使用)这个命令行界面 是认为你有这些的基础的: node.js相关打包工具.如果你对vue或者前端构建工具任一不熟(不认识node || 不认识打包工具) == true,强烈建议别急着用这个CLI,先(不借助打包工具)过一遍这个指南

For Vue 3, you should use Vue CLI v4.5 available on npm as @vue/cli@next. To upgrade, you need to reinstall the latest version of @vue/cli globally:

对于Vue3,你该用 Vue CLI v4.5—— npm上已经有了——[@vue](/user/vue)/cli@next.

升级的话,应该

  1. 重新全局安装最新版本:

    yarn global add [@vue](/user/vue)/cli@next
    # OR
    npm install -g [@vue](/user/vue)/cli@next
    
  2. 然后在Vue项目里,跑:

    vue upgrade --next
    

Vite (来了来了他来了,让webpack失业的东西他来了)

Vite is a web development build tool that allows for lighting fast serving of code due its native ES Module import approach.

Vue projects can quickly be set up with Vite by running the following commands in your terminal.

Vite是一个web开发打包工具.能够 ,地serve代码.原因是,它的原生es模块引入方式(rollup??我胡说的…).

通过在终端内输入以下指令,可以轻松通过Vite搭起来Vue项目:

  • NPM

    npm init vite-app <project-name>
    cd <project-name>
    npm install
    npm run dev
    
  • YARN

    yarn create vite-app <project-name>
    cd <project-name>
    yarn
    yarn dev
    

解释 —— 为什么有各种的打包/构建(build)类型

In the dist/ directory of the NPM package you will find many different builds of Vue.js. Here is an overview of which dist file should be used depending on the use-case

dist/ [directory of the NPM package](https://cdn.jsdelivr.net/npm/vue@3.0.0-rc.6/dist/)(连接会变的…😀)里面,有很多打包生成文件.来大概看看dist里面的文件都在什么情境下使用.

From CDN or without a Bundler CDN/或没有打包器(webpack…之类)的情况~

vue(.runtime).global(.prod).js:

  • For direct use via <script src="..."> in the browser, exposes the Vue global.

  • 直接使用, 在浏览器直接通过<script> 标签. 对外全局暴露Vue对象.

  • In-browser template compilation:

  • 浏览器端模版编译?:

  • vue.global.js is the “full” build that includes both the compiler and the runtime so it supports compiling templates on the fly.

  • vue.global.js打包的——包含了编译器(compiler)和运行时系统/运行环境(the runtime),所以他支持直接编译template/模版.(是不是不知道on the fly 怎么翻…你就想象一下飞机在天上换发动机吧~)

  • vue.runtime.global.js contains only the runtime and requires templates to be pre-compiled during a build step

  • vue.runtime.global.js只包含运行时系统/运行环境(the runtime),所以需要模版通过一个打包过程进行预编译.

  • Inlines all Vue core internal packages - i.e. it’s a single file with no dependencies on other files. This means you must import everything from this file and this file only to ensure you are getting the same instance of code.

  • (这个文件vue(.runtime).global(.prod).js)内联了Vue所有的内部 核心包——也就是说——他是一个单独文件,不依赖其他文件. 也就是说. 你必须从这个文件引用(import)全部内容(everything);这个文件也仅确保你获得相同的实例代码(same ins of code) (说实话,这段有点晕.在于 you must import everything from this file. 我不理解must修饰重点在于everything 还是this file,我先按照everything理解了——就是说这是一个整包,依赖全在内部,所以无法单独引入某个对象.)

  • Contains hard-coded prod/dev branches, and the prod build is pre-minified. Use the *.prod.js files for production.

  • (这个文件)包括了硬编码了的prod/dev分支,而且 prod包是预压缩了的. 在生产环境使用*.prod.js.

番外:hardcoding also refers to developing the core engine of the system responsible for low-level tasks and executing scripts. 别管以前硬编码指的是什么,现在硬编码也指开发系统的核心引擎,用于处理一些低级别任务和执行脚本——当作内核指令理解吧

Note 提醒

Global builds are not UMD builds. They are built as IIFEs and are only meant for direct use via <script src="...">. 全局打包文件不是umd打包文件.他们是一堆立即执行文件IIFEs,所以全是为了直接拿来用的.

vue(.runtime).esm-browser(.prod).js:

  • For usage via native ES modules imports (in browser via <script type="module">.
  • 通过原生ES模块引入(import)(浏览器环境通过<script type="module">标签)
  • Shares the same runtime compilation, dependency inlining and hard-coded prod/dev behavior with the global build.
  • (这个文件和之前)都有一样的运行时编译(runtime compilation),内部依赖(dependency inlining) 和 硬编码了的prod/dev行为.

With a Bundler 有打包器的情况下~:

vue(.runtime).esm-bundler.js:

  • For use with bundlers like webpack, rollup and parcel.
  • 和打包器们搭配使用.webpack, rollup and parcel…
  • Leaves prod/dev branches with process.env.NODE_ENV guards (must be replaced by bundler)
  • 把 prod/dev分支 交给了 process.env.NODE_ENV 来管理 (所以必须被打包器替换 ? 这部分有点困惑)
  • Does not ship minified builds (to be done together with the rest of the code after bundling)
  • 不提供压缩包(与打包后的代码一起压缩)
  • Imports dependencies (e.g.[@vue](/user/vue)/runtime-core, [@vue](/user/vue)/runtime-compiler)
  • 引入依赖(即,[@vue](/user/vue)/runtime-core, [@vue](/user/vue)/runtime-compiler)
    • Imported dependencies are also esm-bundler builds and will in turn import their dependencies (e.g. @vue/runtime-core imports @vue/reactivity)
    • 引入了的依赖包们也是esm-bundler包,所以也会一次引入他们各自的依赖.(比如,@vue/runtime-core 引入了 @vue/reactivity)
    • This means you can install/import these deps individually without ending up with different instances of these dependencies, but you must make sure they all resolve to the same version.
    • 这意味着,你可以单独安装/导入这些依赖,且不会导致这些依赖出现不一样的实例.但是前提是,需要确保这些全依赖包解析出来的是相同版本.
  • In-browser template compilation
  • 浏览器端模版编译:
    • vue.runtime.esm-bundler.jsis runtime only, and requires all templates to be pre-compiled. This is the default entry for bundlers (via module field in package.json) because when using a bundler templates are typically pre-compiled (e.g. in *.vue files).
    • vue.runtime.esm-bundler.js(默认),仅有运行时/运行环境(runtime).要求所有模版预编译. 这是打包器的默认入口(package.json里面的module字段),因为使用打包器时,模版通常是预编译的(比方说,在.vue 文件里)
    • vue.esm-bundler.js:includes the runtime compiler. Use this if you are using a bundler but still want runtime template compilation (e.g. in-DOM templates or templates via inline JavaScript strings). You will need to configure your bundler to alias vue to this file.
    • vue.esm-bundler.js:包括了运行时编译器. 使用这打包器,但是仍然想在运行模版编译,可以使用它.(比如in—Dom模版,或者通过内联js字符串的模版). 你需要配置bunder在这个文件里给Vue一个别名.

For Server-Side Rendering SSR服务端渲染的情况:

vue.cjs(.prod).js:

  • For use in Node.js server-side rendering via require()
  • 通过require()使用node.js进行服务端渲染.
  • If you bundle your app with webpack with target: ‘node’ and properly externalize vue, this is the build that will be loaded.
  • 如果你打包你的应用的时候, webpack内有target:'node',并且正确的外部化了vue.这就是会正确加载的文件了~
  • The dev/prod files are pre-built, but the appropriate file is automatically required based on process.env.NODE_ENV
  • pro/prod 文件都是预打包了的. 然后至于选哪个是通过process.env.NODE_ENV来自动选择的.

运行时(Runtime)+编译器 与 仅运行时(RuntimeOnly)

ps. 如果你产生了什么是 运行时 的疑惑, 请联系我🥶…我来告诉你.

If you need to compile templates on the client (e.g. passing a string to the template option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build:

如果你需要在客户端编译模版(传一个string给模版option;使用一个元素的in-Dom HTML 作为模版 去 挂载(mount)到这个元素上),你需要编译器外加打个全量包:

    // this requires the compiler
    Vue.createApp({
      template: '<div>{{ hi }}</div>'
    })
    
    // this does not
    Vue.createApp({
      render() {
        return Vue.h('div', {}, this.hi)
      }
    })

When using vue-loader, templates inside *.vue files are pre-compiled into JavaScript at build time. You don’t really need the compiler in the final bundle, and can therefore use the runtime-only build.

当使用vue-loader的时候,*.vue文件内的模版(templates)在打包时已经被预编译成js了. 你在最终打包时候真真的不需要编译器.因此可以使用进 runtime的包.

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: Frankie_S 原文链接:https://juejin.im/post/6863087597711785998

回到顶部