【猿说VUE】初识VUE，带你打开VUE之门
2 VUE基础：基本认知
自从近几年前后端分离模式开始后，作为从事后端开发的我，为了跟上时代的步伐，或者能够跟现在的年轻人交流，开始了自学VUE的学习之旅。再次记录学习中的点点滴滴，争取把学习过程中的九九八十一难都记录下来，作为自己学习的一个见证，也是对自己的一个督促。
VUE中文官网：https://cn.vuejs.org/
2.1 特点介绍
- 用于构建用户界面的渐进式JavaScript 框架
- 遵循MVVM 模式
- 编码简洁，体积小，运行效率高，适合移动/PC端开发
- 本身只关注UI, 可以轻松引入vue插件或其它第三库开发项目
- 借鉴
AngularJS的模板和数据绑定技术 - 借鉴
React的组件化和虚拟DOM 技术
2.1 VUE扩展插件
vue-cli：VUE脚手架vue-resource(axios)：AJAX请求vue-router：路由vuex：状态管理vue-lazyload：图片懒加载vue-scroller：页面滑动相关mint-ui：基于VUE的UI组件库(移动端)element-ui：基于VUE的UI组件库(WEB端)
2.2 VUE安装
2.2.1 直接引用
制作原型或学习的使用最新版本方法：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
生产环境推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script src="https://cdn.jsdelivr.net/npm/[email protected]">script>
注意：生产环境版本，把 vue.js 换成 vue.min.js。这是一个更小的构建，可以带来比开发环境下更快的速度体验。
2.2.2 命令安装
注意：其实除了必要的Node.js外，我们组内前端的MM告诉我其他的可以不用都一步步验证，可以直接导入现有的项目，然后直接在其基础上进行开发。本人本着初学的态度，想整个体会一遍完成的过程。果然掉进了大坑。本人按照说明替换使用了淘宝的镜像，但是使用cnpm安装其他包的时候，还是因为网络问题导致中途各种问题，基本上反反复复好几遍都没有成功。顺便吐槽一下移动的宽带，因为图便宜，今年家里使用的免费的移动宽带。就是移动网络导致安装过程中因为不稳定等因素，多次卡顿停滞。在折磨的崩溃之际，问了问前端MM，果断切换手机的电信4G热点，后续顺序完成了整个过程的体验。浪费了整整一个晚上的时间，外加上精神的折磨。
2.2.2.1 安装Node.js
使用VUE的基础需要依赖Node.js，所以需要在自己的机器上先进行安装NodeJS。需要访问NodeJS官网进行下载。本人机器是Windows，选择相应版本下载后进行默认安装即可。
安装完成后打开cmd窗口输入node -v和npm -v测试是否已经成功安装。
Microsoft Windows [版本 10.0.16299.1268]
(c) 2017 Microsoft Corporation。保留所有权利。
C:\Users\Administrator>node -v
v12.16.1
C:\Users\Administrator>npm -v
6.13.4
C:\Users\Administrator>
2.2.2.2 安装cnpm
由于许多npm包都在国外，所以推荐用淘宝的镜像服务器，对依赖的module进行安装。 参考网址为：http://npm.taobao.org/ 安装命令为：npm install -g cnpm --registry=https://registry.npm.taobao.org
PS C:\Users\Administrator> cnpm -v
cnpm@6.1.1 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.13.7 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@12.16.1 (C:\Program Files\nodejs\node.exe)
npminstall@3.27.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\Administrator\AppData\Roaming\npm
win32 x64 10.0.16299
registry=https://r.npm.taobao.org
接下来需要给cnpm命令授权，否则在VS Code中无法执行。在运行PowerShell窗口，执行如下命令：set-ExecutionPolicy RemoteSigned，然后输入A 回车。
Windows PowerShell
版权所有 (C) Microsoft Corporation。保留所有权利。
PS C:\Users\Administrator> set-ExecutionPolicy RemoteSigned
执行策略更改
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
[Y] 是(Y) [A] 全是(A) [N] 否(N) [L] 全否(L) [S] 暂停(S) [?] 帮助 (默认值为“N”): A
PS C:\Users\Administrator>
2.2.2.3 安装VUE或者vue-cli
使用命令进行安装：cnpm install -g vue
PS C:\vueworkspace> cnpm install -g vue
Downloading vue to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue_tmp\_vue@2.6.11@vue to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue
Installing vue's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue/node_modules
All packages installed (used 3ms(network 1ms), speed 0B/s, json 0(0B), tarball 0B)
PS C:\vueworkspace>
使用命令进行安装：cnpm install -g vue-cli
PS C:\vueworkspace> cnpm install -g vue-cli
Downloading vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli_tmp\_vue-cli@2.9.6@vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli
Installing vue-cli's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules\_commander@2.20.3@commander
[2/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch
[3/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
[4/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
[5/20] rimraf@^2.5.0 existed at node_modules\_rimraf@2.7.1@rimraf
[6/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consolidate
[7/20] chalk@^2.1.0 installed at node_modules\_chalk@2.4.2@chalk
[8/20] semver@^5.1.0 installed at node_modules\_semver@5.7.1@semver
[9/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
[10/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
[11/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home
[12/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read-metadata
[13/20] coffee-script@1.12.7 existed at node_modules\_coffee-script@1.12.7@coffee-script
[14/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-package-name@3.0.0@validate-npm-package-name
[15/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.7.3@handlebars
[16/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith
[17/20] async@^2.4.0 installed at node_modules\_async@2.6.3@async
[18/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.1.0@download-git-repo
[19/20] request@^2.67.0 installed at node_modules\_request@2.88.2@request
[20/20] inquirer@^6.0.0 installed at node_modules\_inquirer@6.5.2@inquirer
deprecate metalsmith@2.3.0 › gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
Recently updated (since 2020-02-16): 3 packages (detail see file C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\.recently_updates.txt)
2020-02-22
→ request@2.88.2 › har-validator@5.1.3 › ajv@^6.5.5(6.12.0) (21:51:48)
2020-02-21
→ inquirer@6.5.2 › rxjs@6.5.4 › tslib@^1.9.0(1.11.0) (05:25:00)
2020-02-18
→ handlebars@4.7.3 › uglify-js@^3.1.4(3.8.0) (22:29:54)
All packages installed (238 packages installed from npm registry, used 16s(network 16s), speed 326.94kB/s, json 223(452.82kB), tarball 4.57MB)
[[email protected]] link C:\Users\Administrator\AppData\Roaming\npm\vue@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
[[email protected]] link C:\Users\Administrator\AppData\Roaming\npm\vue-init@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
[[email protected]] link C:\Users\Administrator\AppData\Roaming\npm\vue-list@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
PS C:\vueworkspace>
2.2.2.4 安装webpack
安装webpack：npm install -g webpack (打包JavaScript的工具)
PS C:\vueworkspace> cnpm install -g webpack
Downloading webpack to C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack_tmp\_webpack@4.41.6@webpack to C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack
Installing webpack's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack/node_modules
[1/23] @webassemblyjs/helper-module-context@1.8.5 installed at node_modules\_@webassemblyjs_helper-module-context@1.8.5@@webassemblyjs\helper-module-context
[2/23] eslint-scope@^4.0.3 installed at node_modules\_eslint-scope@4.0.3@eslint-scope
[3/23] chrome-trace-event@^1.0.2 installed at node_modules\_chrome-trace-event@1.0.2@chrome-trace-event
[4/23] acorn@^6.2.1 installed at node_modules\_acorn@6.4.0@acorn
[5/23] ajv-keywords@^3.4.1 installed at node_modules\_ajv-keywords@3.4.1@ajv-keywords
[6/23] loader-runner@^2.4.0 installed at node_modules\_loader-runner@2.4.0@loader-runner
[7/23] @webassemblyjs/wasm-edit@1.8.5 installed at node_modules\_@webassemblyjs_wasm-edit@1.8.5@@webassemblyjs\wasm-edit
[8/23] @webassemblyjs/ast@1.8.5 installed at node_modules\_@webassemblyjs_ast@1.8.5@@webassemblyjs\ast
[9/23] memory-fs@^0.4.1 installed at node_modules\_memory-fs@0.4.1@memory-fs
[10/23] json-parse-better-errors@^1.0.2 installed at node_modules\_json-parse-better-errors@1.0.2@json-parse-better-errors
[11/23] tapable@^1.1.3 existed at node_modules\_tapable@1.1.3@tapable
[12/23] @webassemblyjs/wasm-parser@1.8.5 installed at node_modules\_@webassemblyjs_wasm-parser@1.8.5@@webassemblyjs\wasm-parser
[13/23] ajv@^6.10.2 installed at node_modules\_ajv@6.12.0@ajv
[14/23] enhanced-resolve@^4.1.0 installed at node_modules\_enhanced-resolve@4.1.1@enhanced-resolve
[15/23] mkdirp@^0.5.1 installed at node_modules\_mkdirp@0.5.1@mkdirp
[16/23] neo-async@^2.6.1 installed at node_modules\_neo-async@2.6.1@neo-async
[17/23] loader-utils@^1.2.3 installed at node_modules\_loader-utils@1.4.0@loader-utils
[18/23] schema-utils@^1.0.0 installed at node_modules\_schema-utils@1.0.0@schema-utils
[19/23] webpack-sources@^1.4.1 installed at node_modules\_webpack-sources@1.4.3@webpack-sources
platform unsupported watchpack@1.6.0 › chokidar@2.1.8 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32)
[20/23] watchpack@^1.6.0 installed at node_modules\_watchpack@1.6.0@watchpack
[21/23] node-libs-browser@^2.2.1 installed at node_modules\_node-libs-browser@2.2.1@node-libs-browser
[22/23] micromatch@^3.1.10 installed at node_modules\_micromatch@3.1.10@micromatch
[23/23] terser-webpack-plugin@^1.4.3 installed at node_modules\_terser-webpack-plugin@1.4.3@terser-webpack-plugin
Recently updated (since 2020-02-16): 3 packages (detail see file C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack\node_modules\.recently_updates.txt)
2020-02-22
→ ajv@^6.10.2(6.12.0) (21:51:48)
2020-02-21
→ chrome-trace-event@1.0.2 › tslib@^1.9.0(1.11.0) (05:25:00)
2020-02-20
→ loader-utils@^1.2.3(1.4.0) (01:33:22)
All packages installed (295 packages installed from npm registry, used 7s(network 6s), speed 743.96kB/s, json 269(500.49kB), tarball 4.2MB)
[[email protected]] link C:\Users\Administrator\AppData\Roaming\npm\webpack@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
PS C:\vueworkspace>
2.2.2.5 创建Demo工程
通过命令行中，切换到指定目录，然后执行命令：vue init webpack vuedemo
新建一个vueworkspace工作目录来放置项目，该在目录下面通过命令行执行命令行。这个命令的意思是初始化一个vue项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中projectName是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中。注意：项目名不能大写，不能使用中文。
webpack：一个全面的webpack+vue-loader的模板，功能包括热加载，linting，检测和CSS扩展。webpack-simple：一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。browserify：一个全面的Browserify+vueify 的模板，功能包括热加载，linting，单元检测。browserify-simple：一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。simple：一个最简单的单页应用模板。
注意： 如果出现乱码，请在控制台的PowerShell中输入CHCP 65001，按回车键即可将编码格式设成utf-8，再创建工程就不会乱码了。
PS C:\vueworkspace> vue init webpack vuedemo
'git' is not recognized as an internal or external command,
operable program or batch file.
? Project name vuedemo
? Project description A Vue.js project
? Author gavinbj
? 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 "vuedemo".
# Installing project dependencies ...
# ========================
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 request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
[ .................] / fetchMetadata: sill pacote range manifest for debug@^2.6.9 fetched in 2184ms
.
├── build/ # webpack配置文件
│ └── ...
├── config/
│ ├── index.js # 主要项目配置
│ └── ...
├── src/
│ ├── main.js # 应用入口js文件
│ ├── App.vue # 主应用程序组件
│ ├── components/ # 公共组件目录
│ │ └── ...
│ └── router/ # 前端路由
│ │ └── ...
│ └── assets/ # 模块资源（由webpack处理）
│ └── ...
├── static/ # 纯静态资源（直接复制）
├── .babelrc # babel 配置，es6需要babel编译
├── .postcssrc.js # postcss 配置
├── .eslintrc.js # eslint 配置
├── .editorconfig # 编辑器 配置
├── .gitignore # 过滤无需上传的文件
├── index.html # index.html模板
└── package.json # 构建脚本和依赖关系
2.2.2.6 创建项目选项配置详细解析
# 找到了同样这个目录是否要继续
Target directory exists. Continue? (Y/n) y
Target directory exists. Continue? Yes
# 项目的名称（默认是文件夹的名称），ps：项目的名称不能有大写，不能有中文，否则会报错
Project name (vuedemo)
Project name vuedemo
# 项目描述，可以自己写，默认回车就用示例
Project description (A Vue.js project)
Project description A Vue.js project
# 项目创建者
Author (gavinbj)
Author gavinbj
# 选择打包方式，有两种方式（runtime和standalone），使用默认即可
Vue build (Use arrow keys)
Vue build standalone
# 是否安装路由，一般都要安装
Install vue-router? (Y/n) y
Install vue-router? Yes
# 是否启用eslint检测规则，这里个人建议选no，因为经常会各种代码报错，新手还是不安装好
Use ESLint to lint your code? (Y/n) n
Use ESLint to lint your code? No
# 是否安装单元测试
Setup unit tests with Karma + Mocha? (Y/n)
Setup unit tests with Karma + Mocha? Yes
# 是否安装e2e测试
Setup e2e tests with Nightwatch? (Y/n) y
Setup e2e tests with Nightwatch? Yes
2.2.2.7 安装项目依赖cnpm install
进入到刚才创建的工程目录（vuedemo），执行命令安装项目依赖：cnpm install
前面在项目初始化的时候，已经存在了package.json文件，直接使用npm install 安装项目所需要的依赖，否则项目不能正确运行。
PS C:\vueworkspace> cd .\vuedemo\
PS C:\vueworkspace\vuedemo> npm install
[ .................] | fetchMetadata: sill pacote range manifest for url-parse@^1.1.8 fetched in 305ms
2.2.2.8 启动项目npm run dev
在Demo项目目录下运行命令：npm run dev，启动服务，服务启动成功后浏览器会默认打开一个“欢迎页面”，如下图。注意：这里是默认服务启动的是本地的8080端口，所以请确保你的8080端口不被别的程序所占用，当有其他VUE项目运行的时候，可以使用ctrl+c来中断运行。
PS C:\vueworkspace\vuedemo> npm run dev
> vuedemo@1.0.0 dev C:\vueworkspace\vuedemo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 32/35 modules 3 active ...x=0!C:\vueworkspace\vuedemo\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }. 95% emitting
DONE Compiled successfully in 3043ms 21:35:11
I Your application is running here: http://localhost:8080
2.2.2.9 打包项目npm run build
执行命令进行项目打包：npm run build
PS C:\vueworkspace\vuedemo> cnpm run build
> [email protected] build C:\vueworkspace\vuedemo
> node build/build.js
Hash: f4da110d2bfce4502d80
Version: webpack 3.12.0
Time: 6706ms
Asset Size Chunks Chunk Names
static/js/vendor.dc2a748e035f2d805547.js 121 kB 0 [emitted] vendor
static/js/app.b22ce679862c47a75225.js 11.6 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js 857 bytes 2 [emitted] manifest
static/css/app.30790115300ab27614ce176899523b62.css 432 bytes 1 [emitted] app
static/css/app.30790115300ab27614ce176899523b62.css.map 797 bytes [emitted]
static/js/vendor.dc2a748e035f2d805547.js.map 613 kB 0 [emitted] vendor
static/js/app.b22ce679862c47a75225.js.map 22.2 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js.map 4.97 kB 2 [emitted] manifest
index.html 509 bytes [emitted]
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
编译后直接使用dist文件夹下内容拷贝后可以发布到Nginx下面。
PS C:\vueworkspace\vuedemo> cd .\dist\
PS C:\vueworkspace\vuedemo\dist> dir
目录: C:\vueworkspace\vuedemo\dist
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 2020/2/24 12:06 static
-a---- 2020/2/24 12:06 509 index.html
2.3 安装问题集萃
N001、执行出错npm install vue
PS C:\vueworkspace\vuedemo> npm install vue
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次
。
所在位置 行:1 字符: 1
+ npm install vue
+ ~~~
+ CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
解决方法：
VUE的安装依赖于Node.js，要确保计算机上已安装过Node.js。需要访问NodeJS官网进行下载。我是Windows版本下载后默认进行安装即可。
安装完成后打开cmd窗口 输入node -v和npm -v测试是否已经成功安装。
Microsoft Windows [版本 10.0.16299.1268]
(c) 2017 Microsoft Corporation。保留所有权利。
C:\Users\Administrator>node -v
v12.16.1
C:\Users\Administrator>npm -v
6.13.4
C:\Users\Administrator>
N002、执行出错cnpm install vue-cli –g
PS C:\vueworkspace\vuedemo>
PS C:\vueworkspace\vuedemo>
PS C:\vueworkspace\vuedemo> cnpm install vue-cli –g
cnpm : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go
.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ cnpm install vue-cli –g
+ ~~~~
+ CategoryInfo : SecurityError: (:) []，PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
解决方案：
以管理员身份运行power shell，执行如下命令：set-ExecutionPolicy RemoteSigned，然后输入A 回车。
Windows PowerShell
版权所有 (C) Microsoft Corporation。保留所有权利。
PS C:\Users\Administrator> set-ExecutionPolicy RemoteSigned
执行策略更改
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
[Y] 是(Y) [A] 全是(A) [N] 否(N) [L] 全否(L) [S] 暂停(S) [?] 帮助 (默认值为“N”): A
PS C:\Users\Administrator>
这样再到VSCode里面执行cnpm 命令就可以执行了。
N003、执行出错npm run dev
PS C:\vueworkspace\myvue> npm run dev
> myvue@1.0.0 dev C:\vueworkspace\myvue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! myvue@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 myvue@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-02-23T13_03_11_909Z-debug.log
PS C:\vueworkspace\myvue>
解决方案：缺少对应的命令。
执行命令：npm install webpack-dev-server
执行命令：npm install webpack-cli
PS C:\vueworkspace\myvue> cnpm install webpack-dev-server
| [0/1] Installing p-limit@^1.1.0platform unsupported webpack-dev-server@2.11.5 › chokidar@2.1.8 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 1 packages
√ Linked 431 latest versions
[1/1] scripts.postinstall webpack-dev-server@2.11.5 › webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 run "node lib/post_install.js", root: "C:\\vueworkspace\\myvue\\node_modules\\[email protected]@uglifyjs-webpack-plugin"
[1/1] scripts.postinstall webpack-dev-server@2.11.5 › webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 finished in 70ms
√ Run 1 scripts
Recently updated (since 2020-02-16): 2 packages (detail see file C:\vueworkspace\myvue\node_modules\.recently_updates.txt)
√ All packages installed (494 packages installed from npm registry, used 18s(network 17s), speed 462.57kB/s, json 432(832.8kB), tar
ball 7.03MB)
PS C:\vueworkspace\myvue>
PS C:\vueworkspace\myvue> cnpm install webpack-cli
√ Installed 1 packages
√ Linked 80 latest versions
√ Run 0 scripts
peerDependencies WARNING webpack-cli@* requires a peer of webpack@4.x.x but webpack@3.12.0 was installed
√ All packages installed (56 packages installed from npm registry, used 3s(network 3s), speed 199.5kB/s, json 82(205.21kB), tarball
328.85kB)
PS C:\vueworkspace\myvue>
N004、执行出错：cnpm run dev
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
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\Administrator\AppData\Roaming\npm-cache\_logs\2020-02-23T13_28_08_824Z-debug.log
解决方案：
错误原因在于由于文件node_modules太大，在项目上传时有些人会删掉，导致我们下载的项目中缺少这个文件。
解决方法：在命令行中先进入文件所在路径，输入命令：npm i
然后发现项目中多出了文件node_modules，接着继续执行：npm run dev
发现项目运行成功。
PS C:\vueworkspace\myvue> cnpm i
\ [31/69] Installing meow@^3.3.0
WARN node unsupported "[email protected]" is incompatible with karma@^1.4.1, expected node@0.10 || 0.12 || 4 || 5 || 6 || 7 || 8
| [59/69] Installing bluebird@^3.1.1platform unsupported karma@1.7.1 › chokidar@1.7.0 › fsevents@^1.0.0 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.0.0] optional install error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 69 packages
√ Linked 694 latest versions
[1/5] scripts.install chromedriver@^2.27.2 run "node install.js", root: "C:\\vueworkspace\\myvue\\node_modules\\[email protected]@chromedriver"
Current existing ChromeDriver binary is unavailable, proceding with download and extraction.
Downloading from file: https://cdn.npm.taobao.org/dist/chromedriver/2.46/chromedriver_win32.zip
Saving to file: C:\Users\ADMINI~1\AppData\Local\Temp\2.46\chromedriver\chromedriver_win32.zip
Received 794K...
Received 1583K...
Received 2367K...
Received 3160K...
Received 3949K...
Received 4523K total.
Extracting zip contents
Copying to target path C:\vueworkspace\myvue\node_modules\_chromedriver@2.46.0@chromedriver\lib\chromedriver
Done. ChromeDriver binary available at C:\vueworkspace\myvue\node_modules\_chromedriver@2.46.0@chromedriver\lib\chromedriver\chromedriver.exe
[1/5] scripts.install chromedriver@^2.27.2 finished in 2s
[2/5] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "C:\\vueworkspace\\myvue\\node_modules\\[email protected]@core-js"
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 -)
[2/5] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 finished in 73ms
[3/5] scripts.install karma-phantomjs-launcher@1.0.4 › phantomjs-prebuilt@^2.1.7 run "node install.js", root: "C:\\vueworkspace\\myvue\\node_modules\\[email protected]@phantomjs-prebuilt"
PhantomJS not found on PATH
Downloading https://cdn.npm.taobao.org/dist/phantomjs/phantomjs-2.1.1-windows.zip
Saving to C:\Users\ADMINI~1\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip
Receiving...
[===================================-----] 86%
Received 17767K total.
Extracting zip contents
Removing C:\vueworkspace\myvue\node_modules\_phantomjs-prebuilt@2.1.16@phantomjs-prebuilt\lib\phantom
Copying extracted folder C:\Users\ADMINI~1\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip-extract-1582464680755\phantomjs-2.1.1-windows -> C:\vueworkspace\myvue\node_modules\_phantomjs-prebuilt@2.1.16@phantomjs-prebuilt\lib\phantom
Writing location.js file
Done. Phantomjs binary available at C:\vueworkspace\myvue\node_modules\_phantomjs-prebuilt@2.1.16@phantomjs-prebuilt\lib\phantom\bin\phantomjs.exe
[3/5] scripts.install karma-phantomjs-launcher@1.0.4 › phantomjs-prebuilt@^2.1.7 finished in 5s
[4/5] scripts.postinstall karma-sinon-chai@1.3.4 › sinon@^4.0.0 run "node scripts/support-sinon.js", root: "C:\\vueworkspace\\myvue\\node_modules\\[email protected]@sinon"
Have some ❤️ for Sinon? You can support the project via Open Collective:
> https://opencollective.com/sinon/donate
[4/5] scripts.postinstall karma-sinon-chai@1.3.4 › sinon@^4.0.0 finished in 68ms
[5/5] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 run "node ./postinstall.js", root: "C:\\vueworkspace\\myvue\\node_modules\\[email protected]@ejs"
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
[5/5] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 finished in 59ms
√ Run 5 scripts
peerDependencies link ajv@5.5.2 in C:\vueworkspace\myvue\node_modules\_ajv-keywords@2.1.1@ajv-keywords unmet with C:\vueworkspace\myvue\node_modules\ajv(6.12.0)
deprecate autoprefixer@7.2.6 › browserslist@^2.11.3 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate css-loader@0.28.11 › cssnano@3.10.0 › autoprefixer@6.7.7 › browserslist@^1.7.6 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate extract-text-webpack-plugin@^3.0.0 Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
deprecate eslint@4.19.1 › file-entry-cache@2.0.0 › flat-cache@1.3.4 › circular-json@^0.3.1 CircularJSON is in maintenance only, flatted is its successor.
deprecate karma-coverage@1.1.2 › istanbul@^0.4.0 This module is no longer maintained, try this instead:
npm i nyc
Visit https://istanbul.js.org/integrations for other alternatives.
deprecate babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 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.
anti semver karma@1.7.1 › useragent@2.3.0 › tmp@0.0.x delcares tmp@0.0.x(resolved as 0.0.33) but using ancestor(karma)'s dependency
tmp@0.0.31(resolved as 0.0.31)
deprecate mocha@3.5.3 › json3@3.3.2 Please use the native JSON object instead of JSON 3
deprecate karma-sinon-chai@1.3.4 › sinon@4.5.0 › @sinonjs/formatio@2.0.0 › samsam@1.3.0 This package has been deprecated in favour of @sinonjs/samsam
deprecate nightwatch@0.9.21 › proxy-agent@2.0.0 › socks-proxy-agent@2.1.1 › socks@~1.1.5 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
deprecate webpack-bundle-analyzer@2.13.1 › bfj-node4@^5.2.0 Switch to the `bfj` package for fixes and new features!
Recently updated (since 2020-02-16): 9 packages (detail see file C:\vueworkspace\myvue\node_modules\.recently_updates.txt)
Today:
→ autoprefixer@7.2.6 › browserslist@2.11.3 › electron-to-chromium@^1.3.30(1.3.359) (09:02:34)
√ All packages installed (785 packages installed from npm registry, used 45s(network 37s), speed 849.54kB/s, json 761(1.98MB), tarb
all 28.86MB)
PS C:\vueworkspace\myvue> npm run dev
> myvue@1.0.0 dev C:\vueworkspace\myvue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 32/35 modules 3 active ...x=0!C:\vueworkspace\myvue\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }. 95% emitting
DONE Compiled successfully in 3043ms 21:35:11
I Your application is running here: http://localhost:8080
N005、执行乱码：vue init webpack vuedemo
PS C:\vueworkspace> vue init webpack vuedemo
'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
? Project name vuedemo
? Project description A Vue.js project
? Author
? 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
解决方案：
打开命令控制台PowerShell，在控制台输入CHCP 65001，按回车键即可将编码格式设成utf-8，再创建工程就不会乱码了。
PS C:\vueworkspace> vue init webpack vuedemo
'git' is not recognized as an internal or external command,
operable program or batch file.
? Project name (vuedemo)