You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using Vue, we recommend also installing the [Vue Devtools](https://github.com/vuejs/vue-devtools#vue-devtools)in your browser, allowing you to inspect and debug your Vue applications in a more user-friendly interface.
NPM is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as [Webpack](https://webpack.js.org/)or[Browserify](http://browserify.org/). Vue also provides accompanying tools for authoring [Single File Components](../guide/single-file-component.html).
Vue provides an [official CLI](https://github.com/vuejs/vue-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](https://cli.vuejs.org)for more details.
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 <ahref="./">the guide</a> without any build tools before using the 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:
[Vite](https://github.com/vitejs/vite)is a web development build tool that allows for lighting fast serving of code due its native ES Module import approach.
66
+
[Vite](https://github.com/vitejs/vite)は ネイティブ ES Module の import の仕組みを利用して、超高速なコード配信を可能としたウェブ開発ビルドツールです。
67
67
68
-
Vue projects can quickly be set up with Vite by running the following commands in your terminal.
68
+
次のコマンドをターミナルで実行すると Vite ですぐに Vue プロジェクトをセットアップできます。
69
69
70
-
With NPM:
70
+
NPM の場合:
71
71
72
72
```bash
73
-
$ npm init vite-app <project-name>
74
-
$ cd<project-name>
73
+
$ npm init vite-app <プロジェクト名>
74
+
$ cd<プロジェクト名>
75
75
$ npm install
76
76
$ npm run dev
77
77
```
78
78
79
-
Or with Yarn:
79
+
または Yarn の場合:
80
80
81
81
```bash
82
82
$ yarn create vite-app <project-name>
@@ -85,68 +85,70 @@ $ yarn
85
85
$ yarn dev
86
86
```
87
87
88
-
## Explanation of Different Builds
88
+
## さまざまなビルドについて
89
89
90
-
In the [`dist/`directory of the NPM package](https://cdn.jsdelivr.net/npm/[email protected]/dist/)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.
- For direct use via `<script src="...">` in the browser, exposes the Vue global.
97
-
- In-browser template compilation:
98
-
-`vue.global.js` is the "full" build that includes both the compiler and the runtime so it supports compiling templates on the fly.
99
-
-`vue.runtime.global.js` contains only the runtime and requires templates to be pre-compiled during a build step.
100
-
- 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.
101
-
- Contains hard-coded prod/dev branches, and the prod build is pre-minified. Use the `*.prod.js` files for production.
Global builds are not [UMD](https://github.com/umdjs/umd)builds. They are built as [IIFEs](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)and are only meant for direct use via `<script src="...">`.
-Imported dependencies are also esm-bundler builds and will in turn import their dependencies (e.g. @vue/runtime-core imports @vue/reactivity)
121
-
-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.
122
-
-In-browser template compilation:
123
-
-`vue.runtime.esm-bundler.js`**(default)**is 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).
124
-
-`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.
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:
138
+
もし、クライアントでテンプレートをコンパイルする必要がある(例えば、template オプションに文字列を渡す、または DOM 内の HTML をテンプレートとして要素にマウントする)場合は、コンパイラ、すなわち完全ビルドが必要です:
137
139
138
140
```js
139
-
//this requires the compiler
141
+
//これはコンパイラが必要です
140
142
Vue.createApp({
141
143
template:'<div>{{ hi }}</div>'
142
144
})
143
145
144
-
//this does not
146
+
//これはコンパイラ不要です
145
147
Vue.createApp({
146
148
render() {
147
149
returnVue.h('div', {}, this.hi)
148
150
}
149
151
})
150
152
```
151
153
152
-
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.
0 commit comments