Windows系统搭建VUE开发编译环境（备忘录）

缺乏、安全感 2022-12-20 03:05 260阅读 0赞

### 1、安装NodeJS ###

https://npm.taobao.org/mirrors/node/  
选择对应的版本  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5neXVxaWFuZw_size_16_color_FFFFFF_t_70_pic_center]

### 2、基本配置 ###

（1）选择淘宝的镜像  
`npm install -g cnpm --registry=https://registry.npm.taobao.org`

（2）安装脚手架  
`npm install vue-cli -g`

### 3、构建项目 ###

`vue init webpack 项目名称`

### 4、全部过程 ###

Microsoft Windows [版本 10.0.17763.1518]
    (c) 2018 Microsoft Corporation。保留所有权利。
    
    D:\Users\chengyq>node -v
    v12.16.3
    
    D:\Users\chengyq>npm install -g cnpm --registry=https://registry.npm.taobao.org
    npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
    npm WARN deprecated har-validator@5.1.5: this library is no longer supported
    D:\Users\chengyq\AppData\Roaming\npm\cnpm -> D:\Users\chengyq\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
    + cnpm@6.1.1
    added 688 packages from 971 contributors in 66.093s
    
    D:\Users\chengyq>npm install vue-cli -g
    npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
    npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
    npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
    npm WARN deprecated har-validator@5.1.5: this library is no longer supported
    D:\Users\chengyq\AppData\Roaming\npm\vue-list -> D:\Users\chengyq\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
    D:\Users\chengyq\AppData\Roaming\npm\vue -> D:\Users\chengyq\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
    D:\Users\chengyq\AppData\Roaming\npm\vue-init -> D:\Users\chengyq\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
    + vue-cli@2.9.6
    added 236 packages from 204 contributors in 35.631s
    
    D:\Users\chengyq>vue init webpack myweb
    
    'git' �����ڲ����ⲿ���Ҳ���ǿ����еĳ���
    �������ļ�
    ? Project name myweb
    ? Project description VUE Demo
    ? Vue build standalone
    ? Install vue-router? Yes
    ? Use ESLint to lint your code? No
    ? 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 "myweb".
    
    
    # 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 browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
    npm WARN deprecated core-js@2.6.11: 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 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 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 json3@3.3.2: Please use the native JSON object instead of JSON 3
    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 browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
    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 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 urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
    npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
    
    > chromedriver@2.46.0 install D:\Users\chengyq\myweb\node_modules\chromedriver
    > 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: D:\Users\chengyq\AppData\Local\Temp\2.46\chromedriver\chromedriver_win32.zip
    Received 781K...
    Received 1568K...
    Received 2352K...
    Received 3136K...
    Received 3920K...
    Received 4523K total.
    Extracting zip contents
    Copying to target path D:\Users\chengyq\myweb\node_modules\chromedriver\lib\chromedriver
    Done. ChromeDriver binary available at D:\Users\chengyq\myweb\node_modules\chromedriver\lib\chromedriver\chromedriver.exe
    
    > core-js@2.6.11 postinstall D:\Users\chengyq\myweb\node_modules\core-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 D:\Users\chengyq\myweb\node_modules\webpack\node_modules\uglifyjs-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_modules\sane\node_modules\fsevents):
    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 notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {"node":"<8.10.0"} (current: {"node":"12.16.3","npm":"6.14.4"})
    npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\chokidar\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    
    added 1708 packages from 1086 contributors and audited 1716 packages in 152.971s
    
    39 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
    
    # Project initialization finished!
    # ========================
    
    To get started:
    
      cd myweb
      npm run dev
    
    Documentation can be found at https://vuejs-templates.github.io/webpack
    
    
    
    D:\Users\chengyq>cd myweb
    
    D:\Users\chengyq\myweb>npm run dev
    
    > myweb@1.0.0 dev D:\Users\chengyq\myweb
    > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
    
     12% building modules 23/27 modules 4 active ...q\myweb\src\components\HelloWorld.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
     95% emitting
    
     DONE  Compiled successfully in 4484ms                                                                                                                                                                                               11:19:28
    
     I  Your application is running here: http://localhost:8080

说明：

*  提示： Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere，直接回车键
 *  Use ESLint to lint your code?，选择N
 *

打开浏览器

http://localhost:8080/  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5neXVxaWFuZw_size_16_color_FFFFFF_t_70_pic_center 1]  
myweb目录结构  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5neXVxaWFuZw_size_16_color_FFFFFF_t_70_pic_center 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5neXVxaWFuZw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/b0ac7b7655684eda835bc6e6d35c5f17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5neXVxaWFuZw_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201110112136866.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5neXVxaWFuZw==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5neXVxaWFuZw_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201110112313527.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5neXVxaWFuZw==,size_16,color_FFFFFF,t_70#pic_center