diff --git a/.babelrc b/.babelrc index 3ed94dff9..c13c5f627 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,3 @@ { - "presets": [ - ["env", { "modules": false }] - ] + "presets": ["es2015"] } diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 000000000..d0dd64cbb --- /dev/null +++ b/.eslintrc @@ -0,0 +1,4 @@ +{ + "root": true, + "extends": "vue" +} diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index b31f02096..000000000 --- a/.eslintrc.js +++ /dev/null @@ -1,8 +0,0 @@ -module.exports = { - root: true, - extends: ['plugin:vue-libs/recommended'], - rules: { - indent: 'off', - 'space-before-function-paren': 'off' - } -} diff --git a/.gitattributes b/.gitattributes deleted file mode 100644 index 6313b56c5..000000000 --- a/.gitattributes +++ /dev/null @@ -1 +0,0 @@ -* text=auto eol=lf diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md deleted file mode 100644 index bd0e4f286..000000000 --- a/.github/ISSUE_TEMPLATE.md +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml deleted file mode 100644 index 0a3ad19f4..000000000 --- a/.github/workflows/ci.yml +++ /dev/null @@ -1,46 +0,0 @@ -name: 'ci' -on: - push: - branches: - - master - pull_request: - branches: - - master -jobs: - unit-test: - runs-on: ${{ matrix.os }} - strategy: - matrix: - os: - - ubuntu-latest - - macos-latest - - windows-latest - fail-fast: false - name: "Unit Test: ${{ matrix.os }}" - steps: - - uses: actions/checkout@v2 - - - name: Install pnpm - uses: pnpm/action-setup@v2 - with: - version: 8 - - - name: Set node version to 16 - uses: actions/setup-node@v2 - with: - node-version: 16 - cache: 'pnpm' - - - run: pnpm install - - - name: Run unit tests - run: pnpm run test - - - name: Set up webpack 5 tests - run: npx json -f package.json -I -e "this.resolutions = {}, this.resolutions.webpack = '^5.0.0', this.devDependencies.webpack = '^5.0.0' " - - - name: Install webpack 5 - run: pnpm install --no-frozen-lockfile - - - name: Run unit tests for webpack 5 - run: pnpm run test && pnpm run test:match-resource diff --git a/.gitignore b/.gitignore index 914a2dab2..6c2848eb9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,10 +1,5 @@ -.idea -.DS_Store -exploration node_modules -*.log -example/dist -docs/.vuepress/dist -test/.cache -.vscode -TODOS +npm-debug.log +test/output +docs/_book +.DS_Store diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 6e52da593..000000000 --- a/.npmignore +++ /dev/null @@ -1,10 +0,0 @@ -example -test -*.yml -*.log -yarn.lock -tsconfig.json -docs -.github -.vscode -TODOS diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 4b1b4d60d..000000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,762 +0,0 @@ - -# [15.11.1](https://github.com/vuejs/vue-loader/compare/v15.11.0...v15.11.1) (2023-10-18) - -### Bug Fixes - -* fix: fix read property error for accessing lang of script ([#2060](https://github.com/vuejs/vue-loader/pull/2060)) - - - -# [15.11.0](https://github.com/vuejs/vue-loader/compare/v15.10.2...v15.11.0) (2023-10-18) - -### Features - -* A new `experimentalInlineMatchResource` option (webpack 5 only), which leverages webpack 5's [inline matchResource](https://webpack.js.org/api/loaders/#inline-matchresource) feature in the underlying implementation, and works well with the [`experiments.css`](https://webpack.js.org/configuration/experiments/#experimentscss) feature. This also makes `vue-loader` compatible with [Rspack](https://www.rspack.dev/guide/vue). ([#2058](https://github.com/vuejs/vue-loader/pull/2058)) - - - -# [15.10.2](https://github.com/vuejs/vue-loader/compare/v15.10.1...v15.10.2) (2023-08-23) - -### Bug Fixes - -* don't enable prettify by default if prettier 3 is detected ([aa2558d](https://github.com/vuejs/vue-loader/commit/aa2558d)) - - - -# [15.10.1](https://github.com/vuejs/vue-loader/compare/v15.10.0...v15.10.1) (2022-11-14) - -### Bug Fixes - -* skip thread-loader when cloning js rules to template compilation pipeline, fixes ([fb6ff6e](https://github.com/vuejs/vue-loader/commit/fb6ff6e)) - - - -# [15.10.0](https://github.com/vuejs/vue-loader/compare/v15.10.0-beta.6...v15.10.0) (2022-07-01) - - - - -# [15.10.0-beta.6](https://github.com/vuejs/vue-loader/compare/v15.10.0-beta.5...v15.10.0-beta.6) (2022-06-20) - - -### Bug Fixes - -* always pass id to stylePostLoader when possible ([364ad09](https://github.com/vuejs/vue-loader/commit/364ad09)) - - - - -# [15.10.0-beta.5](https://github.com/vuejs/vue-loader/compare/v15.10.0-beta.4...v15.10.0-beta.5) (2022-06-20) - - -### Bug Fixes - -* css v-bind in production mode ([655e5f8](https://github.com/vuejs/vue-loader/commit/655e5f8)) - - - - -# [15.10.0-beta.4](https://github.com/vuejs/vue-loader/compare/v15.10.0-beta.3...v15.10.0-beta.4) (2022-06-20) - - -### Features - -* support css v-bind (requires 2.7.0-beta.3) ([d653f3b](https://github.com/vuejs/vue-loader/commit/d653f3b)) - - - - -# [15.10.0-beta.3](https://github.com/vuejs/vue-loader/compare/v15.10.0-beta.2...v15.10.0-beta.3) (2022-06-16) - - -### Bug Fixes - -* cache descriptor with correct resource path ([f6c83b5](https://github.com/vuejs/vue-loader/commit/f6c83b5)) - - - - -# [15.10.0-beta.2](https://github.com/vuejs/vue-loader/compare/v15.10.0-beta.1...v15.10.0-beta.2) (2022-06-16) - - -### Features - -* use script-analyzed bindings when compiling template ([55de28c](https://github.com/vuejs/vue-loader/commit/55de28c)) - - - - -# [15.10.0-beta.1](https://github.com/vuejs/vue-loader/compare/v15.9.8...v15.10.0-beta.1) (2022-06-14) - - -### Features - -* apply js loaders to compiled template code when used with 2.7 ([30464a8](https://github.com/vuejs/vue-loader/commit/30464a8)) -* compat for vue 2.7, support ` - - +``` js +npm install -g vue-cli +vue init webpack-simple hello +cd hello +npm install +npm run dev ``` -There are many cool features provided by `vue-loader`: - -- Allows using other webpack loaders for each part of a Vue component, for example Sass for ` -``` - -There are many cool features provided by `vue-loader`: - -- Allows using other webpack loaders for each part of a Vue component, for example Sass for ` +``` + +Under the hood, the text content inside the ` +``` + +However, note this makes your Vue component Webpack-specific and not compatible with Browserify and [vueify](https://github.com/vuejs/vueify). **If you intend to ship your Vue component as a reusable 3rd-party component, avoid using this syntax.** diff --git a/docs/en/features/es2015.md b/docs/en/features/es2015.md new file mode 100644 index 000000000..9ef7de272 --- /dev/null +++ b/docs/en/features/es2015.md @@ -0,0 +1,33 @@ +# ES2015 + +When `vue-loader` detects the presence of `babel-loader` or `buble-loader` in the same project, it will use them to process the ` +``` + +We are using ES2015's Object literal shorthand here to define the child components. `{ ComponentA }` is simply shorthand for `{ ComponentA: ComponentA }`. Vue will automatically convert the key to `component-a`, so you can use the imported component in the template as ``. + +### Traspiling Normal `.js` Files + +Since `vue-loader` only processes `*.vue` files, you'd need to tell Webpack to process normal `*.js` files with `babel-loader` or `buble-loader` in the Webpack config file. The project scaffolded with `vue-cli` already does it for you. + +### Configuring Babel with `.babelrc` + +`babel-laoder` respects [`.babelrc`](https://babeljs.io/docs/usage/babelrc/), so it is the recommended approach to configure the Babel presets and plugins. diff --git a/docs/en/features/hot-reload.md b/docs/en/features/hot-reload.md new file mode 100644 index 000000000..6ce6f8389 --- /dev/null +++ b/docs/en/features/hot-reload.md @@ -0,0 +1,7 @@ +# Hot Reload + +"Hot Reload" is not simply reloading the page when you edit a file. With hot reload enabled, when you edit a `*.vue` file, all instances of that component will be swapped in **without reloading the page**. It even preserves the current state of your app and these swapped components! This dramatically improves the development experience when you are tweaking the templates or styling of your components. + +![hot-reload](http://blog.evanyou.me/images/vue-hot.gif) + +When scaffolding the project with `vue-cli`, Hot Reload is enabled out-of-the-box. diff --git a/docs/en/features/postcss.md b/docs/en/features/postcss.md new file mode 100644 index 000000000..9a6d9b03d --- /dev/null +++ b/docs/en/features/postcss.md @@ -0,0 +1,48 @@ +# PostCSS + +Any CSS output processed by `vue-loader` is piped through [PostCSS](https://github.com/postcss/postcss) for scoped CSS rewriting. You can also add custom PostCSS plugins to the process, for example [autoprefixer](https://github.com/postcss/autoprefixer) or [CSSNext](http://cssnext.io/). + +Example usage in Webpack 1.x: + +``` js +// webpack.config.js +module.exports = { + // other configs... + vue: { + // use custom postcss plugins + postcss: [require('postcss-cssnext')()] + } +} +``` + +For Webpack 2.x: + +``` js +// webpack.config.js +module.exports = { + // other configs... + plugins: [ + new webpack.LoaderOptionsPlugin({ + vue: { + // use custom postcss plugins + postcss: [require('postcss-cssnext')()] + } + }) + ] +} +``` + +In addition to providing an Array of plugins, the `postcss` option also accepts: + +- A function that returns an array of plugins; + +- An object that contains options to be passed to the PostCSS processor. This is useful when you are using PostCSS projects that relies on custom parser/stringifiers: + + ``` js + postcss: { + plugins: [...], // list of plugins + options: { + parser: sugarss // use sugarss parser + } + } + ``` diff --git a/docs/en/features/scoped-css.md b/docs/en/features/scoped-css.md new file mode 100644 index 000000000..4a1f19709 --- /dev/null +++ b/docs/en/features/scoped-css.md @@ -0,0 +1,51 @@ +# Scoped CSS + +When a ` + + +``` + +Into the following: + +``` html + + + +``` + +#### Notes + +1. You can include both scoped and non-scoped styles in the same component: + + ``` html + + + + ``` + +2. A child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. + +3. Partials are not affected by scoped styles. + +4. **Scoped styles do not eliminate the need for classes**. Due to the way browsers render various CSS selectors, `p { color: red }` will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in `.example { color: red }`, then you virtually eliminate that performance hit. [Here's a playground](http://stevesouders.com/efws/css-selectors/csscreate.php) where you can test the differences yourself. + +5. **Be careful with descendant selectors in recursive components!** For a CSS rule with the selector `.a .b`, if the element that matches `.a` contains a recursive child component, then all `.b` in that child component will be matched by the rule. diff --git a/docs/en/options.md b/docs/en/options.md new file mode 100644 index 000000000..0c196ef84 --- /dev/null +++ b/docs/en/options.md @@ -0,0 +1,95 @@ +# Options Reference + +## Usage Difference Between Webpack 1 & 2 + +For Webpack 1.x: add a root `vue` block in your Webpack config: + +``` js +module.exports = { + // ... + vue: { + // vue-loader options + } +} +``` + +For Webpack 2: use `webpack.LoaderOptionsPlugin`: + +``` js +module.exports = { + // ... + plugins: [ + new webpack.LoaderOptionsPlugin({ + vue: { + // vue-loader options + } + }) + ] +} +``` + +### loaders + +- type: `Object` + + An object specifying Webpack loaders to use for language blocks inside `*.vue` files. The key corresponds to the `lang` attribute for language blocks, if specified. The default `lang` for each type is: + + - `