Webpack构建vue项目-记录

一，安装node.js

https://nodejs.org/en/

二，打开Node.js command prompt

三，执行命令

1.安装vue-cli

C:\deve\workspace\myproject>npm install -g vue-cli
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\Dong\AppData\Roaming\npm\vue-init -> C:\Users\Dong\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
C:\Users\Dong\AppData\Roaming\npm\vue -> C:\Users\Dong\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\Dong\AppData\Roaming\npm\vue-list -> C:\Users\Dong\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
+ [email protected]
added 239 packages from 206 contributors in 32.501s

2.修改chromedriver配置

C:\deve\workspace\myproject>npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

> [email protected] install C:\deve\workspace\myproject\node_modules\chromedriver
> node install.js

Current existing ChromeDriver binary is unavailable, proceding with download and extraction.
Downloading from file:  http://cdn.npm.taobao.org/dist/chromedriver/75.0.3770.8/chromedriver_win32.zip
Saving to file: C:\Users\Dong\AppData\Local\Temp\75.0.3770.8\chromedriver\chromedriver_win32.zip
Received 783K...
Received 1600K...
Received 2387K...
Received 3179K...
Received 3961K...
Received 4549K total.
Extracting zip contents
Copying to target path C:\deve\workspace\myproject\node_modules\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at C:\deve\workspace\myproject\node_modules\chromedriver\lib\chromedriver\chromedriver.exe
npm WARN saveError ENOENT: no such file or directory, open 'C:\deve\workspace\myproject\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\deve\workspace\myproject\package.json'
npm WARN myproject No description
npm WARN myproject No repository field.
npm WARN myproject No README data
npm WARN myproject No license field.

+ [email protected]
added 28 packages from 56 contributors and audited 1992 packages in 11.318s
found 0 vulnerabilities

3.创建项目名为my-project的项目

C:\deve\workspace\myproject>vue init webpack my-project

'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
? Project name my-project
? Project description A Vue.js project
? Author sagitarioo
? 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 ...

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

To get started:

  cd my-project
  npm run dev

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

4.启动

C:\deve\workspace\myproject>cd my-project

C:\deve\workspace\myproject\my-project>npm install
npm WARN [email protected] requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.

audited 31720 packages in 14.387s
found 84 vulnerabilities (65 low, 8 moderate, 10 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

C:\deve\workspace\myproject\my-project>npm run dev

> [email protected] dev C:\deve\workspace\myproject\my-project
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 12% building modules 24/31 modules 7 active ...pace\myproject\my-project\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "bab 95% emitting

 DONE  Compiled successfully in 7514ms                                                                       11:28:18 PM

 I  Your application is running here: http://localhost:8080 

5.打开浏览器

配置vue图形界面

vue ui 是3.0才推出的版本，我使用的时候最新稳定版为2.9.6，所以没有这个功能，故要安装最新的vue

C:\deve\workspace\myproject>npm install -g @vue/cli
C:\Users\Dong\AppData\Roaming\npm\vue -> C:\Users\Dong\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js

> [email protected] postinstall C:\Users\Dong\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\core-js
> node scripts/postinstall || echo "ignore"

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 -)


> [email protected] postinstall C:\Users\Dong\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\core-js-pure
> node scripts/postinstall || echo "ignore"

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 -)


> [email protected] postinstall C:\Users\Dong\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\protobufjs
> node scripts/postinstall


> [email protected] postinstall C:\Users\Dong\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\nodemon
> node bin/postinstall || exit 0

Love nodemon? You can now support the project via the open collective:
 > https://opencollective.com/nodemon/donate

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\@vue\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @vue/[email protected]
added 809 packages from 541 contributors in 105.459s

启动vue ui

C:\deve\workspace\myproject>vue ui
?  Starting GUI...
?  Ready on http://localhost:8000

其他 

第一次尝试没有使用官方脚手架，是参考的这篇文章：随我来基于webpack构建一个简易的vue脚手架 (webpack系列二) - 努力学会微笑 - segmentfault

按照该教程的步骤来搭建。由于插件版本问题，会报一个错：

C:\deve\vue-cli\vues>npm run dev

> [email protected] dev C:\deve\vue-cli\vues
> webpack-dev-server --open --hot

C:\deve\vue-cli\vues\webpack.config.js:30
    new CleanWebpackPlugin(['dist']),  // 告诉清理插件的目录
    ^

TypeError: CleanWebpackPlugin is not a constructor
    at Object. (C:\deve\vue-cli\vues\webpack.config.js:30:5)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at WEBPACK_OPTIONS (C:\deve\vue-cli\vues\node_modules\webpack-cli\bin\utils\convert-argv.js:116:13)
    at requireConfig (C:\deve\vue-cli\vues\node_modules\webpack-cli\bin\utils\convert-argv.js:118:6)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server --open --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Dong\AppData\Roaming\npm-cache\_logs\2019-06-13T14_14_25_609Z-debug.log

需要修改位置：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');  // 清理构建目录下的文件

plugins:[
    new CleanWebpackPlugin(),  // 告诉清理插件的目录
],

运行效果：

代码可参考：https://github.com/Sagitarioo/Personal/tree/master/study

由于node_modules文件夹中的小文件太多，故没有同步。

目录结构：

vues
├─node_modules
│  ├─.bin
│  ├─@types
│  ├─@vue
│  └─...
├─src
│  ├─app.vue
│  └─index.js
├─index.html
├─package.json
└─webpack.config.js