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
-[Environment Variables and Modes](#environment-variables-and-modes)
10
-
-[Configuration](#configuration)
11
-
-[webpack](#webpack)
12
-
-[browserslist](#browserslist)
13
-
-[Dev Server Proxy](#dev-server-proxy)
14
-
-[Babel](#babel)
15
-
-[CSS](#css)
16
-
-[ESLint](#eslint)
17
-
-[TypeScript](#typescript)
18
-
-[Unit Testing](#unit-testing)
19
-
-[E2E Testing](#e2e-testing)
20
-
-[Development](#development)
21
-
22
-
## Introduction
1
+
# Introduction
23
2
24
3
Vue CLI is a full system for rapid Vue.js development, providing:
25
4
@@ -33,133 +12,3 @@ Vue CLI is a full system for rapid Vue.js development, providing:
33
12
- A rich collection of official plugins integrating the best tools in the frontend ecosystem.
34
13
35
14
Vue CLI aims to be the standard tooling baseline for the Vue ecosystem. It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations. At the same time, it still offers the flexibility to tweak the config of each tool without the need for ejecting.
36
-
37
-
## CLI
38
-
39
-
The CLI is installed globally and provides the `vue` command in your terminal:
40
-
41
-
```sh
42
-
npm install -g @vue/cli
43
-
vue create my-project
44
-
```
45
-
46
-
See [CLI docs](./cli.md) for all available commands.
47
-
48
-
## CLI Service
49
-
50
-
`@vue/cli-service` is a dependency installed locally into every project created by `@vue/cli`. It contains the core service that loads other plugins, resolves the final webpack config, and provides the `vue-cli-service` binary to your project. If you are familiar with [create-react-app](https://github.com/facebookincubator/create-react-app), `@vue/cli-service` is essentially the equivalent of `react-scripts`, but more flexible.
51
-
52
-
See [CLI Service docs](./cli-service.md) for all available commands.
53
-
54
-
## Conventions
55
-
56
-
### The Index Page
57
-
58
-
The file `public/index.html` is a template that will be processed with [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin). During build, asset links will be injected automatically. In addition, Vue CLI also automatically injects resource hints (`preload/prefetch`), manifest/icon links (when PWA plugin is used) and inlines the webpack runtime / chunk manifest for optimal performance.
59
-
60
-
### Static Assets Handling
61
-
62
-
Static assets can be handled in two different ways:
63
-
64
-
- Imported in JavaScript or referenced in templates/CSS via relative paths. Such references will be handled by webpack.
65
-
66
-
- Placed in the `public` directory and referenced via absolute paths. These assets will simply be copied and not go through webpack.
67
-
68
-
See [Static Assets Handling](./assets.md) for more details.
69
-
70
-
### Environment Variables and Modes
71
-
72
-
It is a common need to customize the app's behavior based on the target environment - for example, you may want the app to use different API endpoints or credentials during development / staging / production environments.
73
-
74
-
Vue CLI has comprehensive support for specifying different environment variables using modes and `.env` files.
75
-
76
-
See [Environment Variables and Modes](./env.md) for more details.
77
-
78
-
## Configuration
79
-
80
-
Projects created from `vue create` are ready to go out-of-the-box. The plugins are designed to work with one another so in most cases, all you need to do is pick the features you want during the interactive prompts.
81
-
82
-
However, we also understand that it's impossible to cater to every possible need, and the need of a project may also change over time. Projects created by Vue CLI allows you to configure almost every aspect of the tooling without ever needing to eject.
83
-
84
-
### vue.config.js
85
-
86
-
Many aspects of a Vue CLI project can be configured by placing a `vue.config.js` file at the root of your project. The file may already exist depending on the features you selected when creating the project.
87
-
88
-
`vue.config.js` should export an object, for example:
89
-
90
-
```js
91
-
// vue.config.js
92
-
module.exports= {
93
-
lintOnSave:true
94
-
}
95
-
```
96
-
97
-
Check [here](./config.md) for full list of possible options.
98
-
99
-
### webpack
100
-
101
-
Probably the most common configuration need is tweaking the internal webpack config. Vue CLI provides flexible ways to achieve that without ejecting.
102
-
103
-
See [here](./webpack.md) for full details.
104
-
105
-
### browserslist
106
-
107
-
You will notice a `browserslist` field in `package.json` specifying a range of browsers the project is targeting. This value will be used by `babel-preset-env` and `autoprefixer` to automatically determine the JavaScript polyfills and CSS vendor prefixes needed.
108
-
109
-
See [here](https://github.com/ai/browserslist) for how to specify browser ranges.
110
-
111
-
### Dev Server Proxy
112
-
113
-
If your frontend app and the backend API server are not running on the same host, you will need to proxy API requests to the API server during development. This is configurable via the `devServer.proxy` option in `vue.config.js`.
114
-
115
-
See [Configuring Proxy](./cli-service.md#configuring-proxy) for more details.
116
-
117
-
### Babel
118
-
119
-
Babel can be configured via `.babelrc` or the `babel` field in `package.json`.
120
-
121
-
All Vue CLI apps use `@vue/babel-preset-app`, which includes `babel-preset-env`, JSX support and optimized configuration for minimal bundle size overhead. See [its docs](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app) for details and preset options.
122
-
123
-
### CSS
124
-
125
-
Vue CLI projects comes with support for [PostCSS](http://postcss.org/), [CSS Modules](https://github.com/css-modules/css-modules) and pre-processors including [Sass](https://sass-lang.com/), [Less](http://lesscss.org/) and [Stylus](http://stylus-lang.com/).
126
-
127
-
See [here](./css.md) for more details on CSS related configurations.
128
-
129
-
### ESLint
130
-
131
-
ESLint can be configured via `.eslintrc` or `eslintConfig` field in `package.json`.
132
-
133
-
See [@vue/cli-plugin-eslint](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint) for more details.
134
-
135
-
### TypeScript
136
-
137
-
TypeScript can be configured via `tsconfig.json`.
138
-
139
-
See [@vue/cli-plugin-typescript](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript) for more details.
140
-
141
-
### Unit Testing
142
-
143
-
-#### Jest
144
-
145
-
See [@vue/cli-plugin-unit-jest](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest) for more details.
146
-
147
-
-#### Mocha (via `mocha-webpack`)
148
-
149
-
See [@vue/cli-plugin-unit-mocha](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-mocha) for more details.
150
-
151
-
### E2E Testing
152
-
153
-
-#### Cypress
154
-
155
-
See [@vue/cli-plugin-e2e-cypress](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-cypress) for more details.
156
-
157
-
-#### Nightwatch
158
-
159
-
See [@vue/cli-plugin-e2e-nightwatch](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-nightwatch) for more details.
Many aspects of a Vue CLI project can be configured by placing a `vue.config.js` file at the root of your project. The file may already exist depending on the features you selected when creating the project.
10
+
11
+
`vue.config.js` should export an object, for example:
12
+
13
+
```js
14
+
// vue.config.js
15
+
module.exports= {
16
+
lintOnSave:true
17
+
}
18
+
```
19
+
20
+
Check [here](./config.md) for full list of possible options.
21
+
22
+
## webpack
23
+
24
+
Probably the most common configuration need is tweaking the internal webpack config. Vue CLI provides flexible ways to achieve that without ejecting.
25
+
26
+
See [here](./webpack.md) for full details.
27
+
28
+
## browserslist
29
+
30
+
You will notice a `browserslist` field in `package.json` specifying a range of browsers the project is targeting. This value will be used by `babel-preset-env` and `autoprefixer` to automatically determine the JavaScript polyfills and CSS vendor prefixes needed.
31
+
32
+
See [here](https://github.com/ai/browserslist) for how to specify browser ranges.
33
+
34
+
## Dev Server
35
+
36
+
`vue-cli-service serve` starts a dev server based on [webpack-dev-server](https://github.com/webpack/webpack-dev-server). It comes with hot-module-replacement (HMR) out of the box.
37
+
38
+
You can configure the dev server's behavior using the `devServer` option in `vue.config.js`:
39
+
40
+
```js
41
+
module.exports= {
42
+
devServer: {
43
+
open:process.platform==='darwin',
44
+
host:'0.0.0.0',
45
+
port:8080,
46
+
https:false,
47
+
hotOnly:false,
48
+
proxy:null, // string | Object
49
+
before:app=> {
50
+
// app is an express instance
51
+
}
52
+
}
53
+
}
54
+
```
55
+
56
+
In addition to these default values, [all options for `webpack-dev-server`](https://webpack.js.org/configuration/dev-server/) are also supported.
57
+
58
+
### Configuring Proxy
59
+
60
+
If your frontend app and the backend API server are not running on the same host, you will need to proxy API requests to the API server during development. This is configurable via the `devServer.proxy` option in `vue.config.js`.
61
+
62
+
`devServer.proxy` can be a string pointing to the development API server:
63
+
64
+
```js
65
+
module.exports= {
66
+
devServer: {
67
+
proxy:'http://localhost:4000'
68
+
}
69
+
}
70
+
```
71
+
72
+
This will tell the dev server to proxy any unknown requests (requests that did not match a static file) to `http://localhost:4000`.
73
+
74
+
If you want to have more control over the proxy behavior, you can also use an object with `path: options` pairs. Consult [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware#proxycontext-config) for full options:
75
+
76
+
```js
77
+
module.exports= {
78
+
devServer: {
79
+
proxy: {
80
+
'/api': {
81
+
target:'<url>',
82
+
ws:true,
83
+
changeOrigin:true
84
+
},
85
+
'/foo': {
86
+
target:'<other_url>'
87
+
}
88
+
}
89
+
}
90
+
}
91
+
```
92
+
93
+
## Babel
94
+
95
+
Babel can be configured via `.babelrc` or the `babel` field in `package.json`.
96
+
97
+
All Vue CLI apps use `@vue/babel-preset-app`, which includes `babel-preset-env`, JSX support and optimized configuration for minimal bundle size overhead. See [its docs](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app) for details and preset options.
98
+
99
+
## CSS
100
+
101
+
Vue CLI projects comes with support for [PostCSS](http://postcss.org/), [CSS Modules](https://github.com/css-modules/css-modules) and pre-processors including [Sass](https://sass-lang.com/), [Less](http://lesscss.org/) and [Stylus](http://stylus-lang.com/).
102
+
103
+
See [here](./css.md) for more details on CSS related configurations.
104
+
105
+
## ESLint
106
+
107
+
ESLint can be configured via `.eslintrc` or `eslintConfig` field in `package.json`.
108
+
109
+
See [@vue/cli-plugin-eslint](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint) for more details.
110
+
111
+
## TypeScript
112
+
113
+
TypeScript can be configured via `tsconfig.json`.
114
+
115
+
See [@vue/cli-plugin-typescript](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript) for more details.
116
+
117
+
## Unit Testing
118
+
119
+
### Jest
120
+
121
+
See [@vue/cli-plugin-unit-jest](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest) for more details.
122
+
123
+
### Mocha (via `mocha-webpack`)
124
+
125
+
See [@vue/cli-plugin-unit-mocha](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-mocha) for more details.
126
+
127
+
## E2E Testing
128
+
129
+
### Cypress
130
+
131
+
See [@vue/cli-plugin-e2e-cypress](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-cypress) for more details.
132
+
133
+
### Nightwatch
134
+
135
+
See [@vue/cli-plugin-e2e-nightwatch](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-nightwatch) for more details.
Copy file name to clipboardExpand all lines: docs/config/css.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -35,7 +35,7 @@ If you wish to customize the generated CSS modules class names, you can do so vi
35
35
36
36
You can select pre-processors (Sass/Less/Stylus) when creating the project. If you did not do so, you can also just manually install the corresponding webpack loaders. The loaders are pre-configured and will automatically be picked up. For example, to add Sass to an existing project, simply run:
0 commit comments