vue-cli 和webpack

https://github.com/vuejs/vue-cli

https://github.com/vuejs-templates/webpack

https://www.jianshu.com/p/82a85d01c929

Usage

This is a project template for vue-cli. It is recommended to use npm 3+ for a more efficient dependency tree.

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

This will scaffold the project using the master branch. If you wish to use the latest version of the webpack template, do the following instead:

$ vue init webpack#develop my-project

⚠️The develop branch is not considered stable and can contain bugs or not build at all, so use at your own risk.

The development server will run on port 8080 by default. If that port is already in use on your machine, the next free port will be used.

vue init webpack my-project

错误提示

  Command vue init requires a global addon to be installed.

  Please run npm i -g @vue/cli-init and try again.

PS C:workspaceGitHubChuckLuVueWebpackTest> vue init webpack my-project

? Project name my-project
? Project description A Vue.js project
? Author Chuck Lu <chuck.lu@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

vue-cli · Generated "my-project".

# Installing project dependencies ...
# ========================

npm WARN deprecated eslint-loader@1.9.0: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated json3@3.3.2: Please use the native JSON object instead of JSON 3
npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart()
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated fsevents@2.1.3: Please update to v 2.2.x
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated

> chromedriver@2.46.0 install C:workspaceGitHubChuckLuVueWebpackTestmy-project ode_moduleschromedriver
> node install.js

Current existing ChromeDriver binary is unavailable, proceding with download and extraction.
Downloading from file: https://chromedriver.storage.googleapis.com/2.46/chromedriver_win32.zip
Saving to file: C:UserscluAppDataLocalTemp2.46chromedriverchromedriver_win32.zip
Received 781K...
Received 1568K...
Received 2349K...
Received 3131K...
Received 3913K...
Received 4523K total.
Extracting zip contents
Copying to target path C:workspaceGitHubChuckLuVueWebpackTestmy-project ode_moduleschromedriverlibchromedriver
Done. ChromeDriver binary available at C:workspaceGitHubChuckLuVueWebpackTestmy-project ode_moduleschromedriverlibchromedriverchromedriver.exe

> core-js@2.6.12 postinstall C:workspaceGitHubChuckLuVueWebpackTestmy-project ode_modulescore-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

> uglifyjs-webpack-plugin@0.4.6 postinstall C:workspaceGitHubChuckLuVueWebpackTestmy-project ode_moduleswebpack ode_modulesuglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.3 (node_modulessane ode_modulesfsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_moduleschokidar ode_modulesfsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.

added 1817 packages from 1114 contributors and audited 1825 packages in 502.225s

43 packages are looking for funding
run `npm fund` for details

found 101 vulnerabilities (76 low, 9 moderate, 15 high, 1 critical)
run `npm audit fix` to fix them, or `npm audit` for details

Running eslint --fix to comply with chosen preset rules...
# ========================

> my-project@1.0.0 lint C:workspaceGitHubChuckLuVueWebpackTestmy-project
> eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"

# Project initialization finished!
# ========================

To get started:

cd my-project
npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

vuejs-template webpack的官方文档 http://vuejs-templates.github.io/webpack/

Introduction

This boilerplate is targeted towards large, serious projects and assumes you are somewhat familiar with Webpack and vue-loader. Make sure to also read vue-loader's documentation for common workflow recipes.

If you just want to try out vue-loader or whip out a quick prototype, use the webpack-simple template instead.

Quickstart

To use this template, scaffold a project with vue-cli. It is recommended to use npm 3+ for a more efficient dependency tree.

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev