本文介绍vue2项目的初始化
install-vue-init
docker run -it --rm -p17777:8080 node:12.18.3-buster bash
# npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
npm cache clean -f
# npm install vue -g
vue -V
bash: vue: command not found
npm install --loglevel verbose -g @vue/cli-init
npm install --loglevel verbose -g @vue/cli
npm root -g
/usr/local/lib/node_modules
vue -V
@vue/cli 4.5.10
init-app
root@fd29decd360d:/# vue init webpack myapp
? Project name myapp
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no
vue-cli · Generated "myapp".
# Project initialization finished!
# ========================
To get started:
cd myapp
npm install (or if using yarn: yarn)
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
root@b15c7520ab07:/myapp# cat package.json
{
"name": "myapp",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
run-app
cd myapp
npm install
HOST=0.0.0.0 npm run dev
> myapp@1.0.0 dev /myapp
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 26/31 modules 5 active ...e=template&index=0!/myapp/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting
DONE Compiled successfully in 1682ms 10:01:39 AM
I Your application is running here: http://0.0.0.0:8080
root@b15c7520ab07:/myapp# tree -I node_modules
.
|-- README.md
|-- build
| |-- build.js
| |-- check-versions.js
| |-- logo.png
| |-- utils.js
| |-- vue-loader.conf.js
| |-- webpack.base.conf.js
| |-- webpack.dev.conf.js
| `-- webpack.prod.conf.js
|-- config
| |-- dev.env.js
| |-- index.js
| `-- prod.env.js
|-- index.html
|-- package-lock.json
|-- package.json
|-- src
| |-- App.vue
| |-- assets
| | `-- logo.png
| |-- components
| | `-- HelloWorld.vue
| |-- main.js
| `-- router
| `-- index.js
`-- static
7 directories, 20 files
问题
如何查看vue版本
root@b15c7520ab07:/myapp# npm list vue
myapp@1.0.0 /myapp
`-- vue@2.6.12
npm innstall 报错
npm verb stack SyntaxError: Unexpected end of JSON input while parsing near '...": {"node": ">= 6.9.0'
npm verb stack at JSON.parse (<anonymous>)
npm verb stack at parseJson (/usr/local/lib/node_modules/npm/node_modules/json-parse-better-errors/index.js:7:17)
npm verb stack at /usr/local/lib/node_modules/npm/node_modules/node-fetch-npm/src/body.js:96:50
npm verb stack at runMicrotasks (<anonymous>)
npm verb stack at processTicksAndRejections (internal/process/task_queues.js:97:5)
npm verb cwd /myapp
npm verb Linux 4.19.95
npm verb argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "--loglevel" "verbose"
npm verb node v12.18.3
npm verb npm v6.14.6
npm ERR! Unexpected end of JSON input while parsing near '...": {"node": ">= 6.9.0'
npm verb exit [ 1, true ]
npm timing npm Completed in 2976ms
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2021-01-06T09_55_29_383Z-debug.log
## 解决
npm cache clean --force
sockjs-node/info?t=
https://github.com/webpack/webpack-dev-server/issues/416
others
npm install -g npm-check
npm install -g npm-check-updates
root@b15c7520ab07:/myapp# ncu
Checking /myapp/package.json
[====================] 37/37 100%
vue ^2.5.2 → ^2.6.12
vue-router ^3.0.1 → ^3.4.9
autoprefixer ^7.1.2 → ^10.2.0
babel-core ^6.22.1 → ^6.26.3
babel-loader ^7.1.1 → ^8.2.2
babel-plugin-transform-runtime ^6.22.0 → ^6.23.0
babel-plugin-transform-vue-jsx ^3.5.0 → ^3.7.0
babel-preset-env ^1.3.2 → ^1.7.0
babel-preset-stage-2 ^6.22.0 → ^6.24.1
chalk ^2.0.1 → ^4.1.0
copy-webpack-plugin ^4.0.1 → ^7.0.0
css-loader ^0.28.0 → ^5.0.1
file-loader ^1.1.4 → ^6.2.0
friendly-errors-webpack-plugin ^1.6.1 → ^1.7.0
html-webpack-plugin ^2.30.1 → ^4.5.1
node-notifier ^5.1.2 → ^9.0.0
optimize-css-assets-webpack-plugin ^3.2.0 → ^5.0.4
ora ^1.2.0 → ^5.2.0
portfinder ^1.0.13 → ^1.0.28
postcss-import ^11.0.0 → ^14.0.0
postcss-loader ^2.0.8 → ^4.1.0
postcss-url ^7.2.1 → ^10.1.1
rimraf ^2.6.0 → ^3.0.2
semver ^5.3.0 → ^7.3.4
shelljs ^0.7.6 → ^0.8.4
uglifyjs-webpack-plugin ^1.1.1 → ^2.2.0
url-loader ^0.5.8 → ^4.1.1
vue-loader ^13.3.0 → ^15.9.6
vue-style-loader ^3.0.1 → ^4.1.2
vue-template-compiler ^2.5.2 → ^2.6.12
webpack ^3.6.0 → ^5.11.1
webpack-bundle-analyzer ^2.9.0 → ^4.3.0
webpack-dev-server ^2.9.1 → ^3.11.1
webpack-merge ^4.1.0 → ^5.7.3
Run ncu -u to upgrade package.json
root@b15c7520ab07:/myapp# diff package.json-back package.json --side-by-side
悲剧了,ncu -u后项目启动不来了
root@b15c7520ab07:/myapp# npm run dev
> myapp@1.0.0 dev /myapp
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
internal/modules/cjs/loader.js:968
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /myapp/node_modules/webpack-dev-server/bin/webpack-dev-server.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
at Function.Module._load (internal/modules/cjs/loader.js:841:27)
at Module.require (internal/modules/cjs/loader.js:1025:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.<anonymous> (/myapp/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/myapp/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! myapp@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the myapp@1.0.0 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! /root/.npm/_logs/2021-01-06T12_16_21_420Z-debug.log
## 尝试不升级webpack
root@b15c7520ab07:/myapp# ncu -x '/^webpack.*$/' -u
Upgrading /myapp/package.json
[====================] 34/34 100%
@vue/cli-service ^4.5.9 → ^4.5.10
vue ^2.5.2 → ^2.6.12
vue-router ^3.0.1 → ^3.4.9
autoprefixer ^7.1.2 → ^10.2.0
babel-core ^6.22.1 → ^6.26.3
babel-loader ^7.1.1 → ^8.2.2
babel-plugin-transform-runtime ^6.22.0 → ^6.23.0
babel-plugin-transform-vue-jsx ^3.5.0 → ^3.7.0
babel-preset-env ^1.3.2 → ^1.7.0
babel-preset-stage-2 ^6.22.0 → ^6.24.1
chalk ^2.0.1 → ^4.1.0
copy-webpack-plugin ^4.0.1 → ^7.0.0
css-loader ^0.28.0 → ^5.0.1
file-loader ^1.1.4 → ^6.2.0
friendly-errors-webpack-plugin ^1.6.1 → ^1.7.0
html-webpack-plugin ^2.30.1 → ^4.5.1
node-notifier ^5.1.2 → ^9.0.0
optimize-css-assets-webpack-plugin ^3.2.0 → ^5.0.4
ora ^1.2.0 → ^5.2.0
portfinder ^1.0.13 → ^1.0.28
postcss-import ^11.0.0 → ^14.0.0
postcss-loader ^2.0.8 → ^4.1.0
postcss-url ^7.2.1 → ^10.1.1
rimraf ^2.6.0 → ^3.0.2
semver ^5.3.0 → ^7.3.4
shelljs ^0.7.6 → ^0.8.4
uglifyjs-webpack-plugin ^1.1.1 → ^2.2.0
url-loader ^0.5.8 → ^4.1.1
vue-loader ^13.3.0 → ^15.9.6
vue-style-loader ^3.0.1 → ^4.1.2
vue-template-compiler ^2.5.2 → ^2.6.12
ERROR Failed to compile with 1 error 3:04:26 PM
error in ./src/App.vue?vue&type=style&index=0&lang=css&
Syntax Error: Error: PostCSS plugin postcss-import requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
vue-cli-service
npm i @vue/cli-service
ref
- https://segmentfault.com/a/1190000014804826
- https://zhuanlan.zhihu.com/p/105902630
- https://jinzhuming0308.medium.com/%E4%BD%BF%E7%94%A8-ncu-npm-check-updates-%E6%9D%A5%E6%9B%B4%E6%96%B0%E4%BE%9D%E8%B5%96-a731091d19f1