使用 vscode 搭建 vue 项目

---

前置准备

已确定安装了
Vscode
node.js
vue-cli

C:\Users\HP>vue -cli -V
@vue/cli 5.0.8

C:\Users\HP>webpack -v

  System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz
    Memory: 15.81 GB / 31.83 GB
  Binaries:
    Node: 16.14.2 - D:\dev\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.5.0 - D:\dev\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (107.0.1418.52)
    Internet Explorer: 11.0.19041.1566
  Packages:
    webpack-cli: ^5.0.0 => 5.0.0

---

一、搭建 vue2 项目

以上前置准备安装完成之后就可以开始创建vue项目，首先创建一个文件夹用来存放你的项目，用vscode打开对应的文件夹，并在终端cd到对应的文件夹。比如我的文件夹就是Vuedemo02

创建项目命令，输入回车:
vue init webpack vuedemo02
其中 vuedemo02 就是项目名称，根据喜好自己取。

Windows PowerShell
版权所有 (C) Microsoft Corporation。保留所有权利。

尝试新的跨平台 PowerShell https://aka.ms/pscore6

PS E:\VSCode\Vuedemo02> vue init webpack Vuedemo02

  Command vue init requires a global addon to be installed.
  Please run npm i -g @vue/cli-init and try again.

PS E:\VSCode\Vuedemo02> npm i -g @vue/cli-init
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions ...............

added 244 packages in 9s
PS E:\VSCode\Vuedemo02> vue init webpack Vuedemo02

? Project name vuedemo02
? Project description A Vue.js project
? Author haloyo <11054582+halloyo@user.noreply.gitee.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? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "Vuedemo02".


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

npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
..............

added 1770 packages in 40s


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


> vuedemo02@1.0.0 lint
> eslint --ext .js,.vue src test/unit "--fix"


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

To get started:  

  cd Vuedemo02
  npm run dev

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


PS E:\VSCode\Vuedemo02> npm run dev  // 这里应该先 cd 到 Vuedemo02 
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path E:\VSCode\Vuedemo02/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'E:\VSCode\Vuedemo02\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\HP\AppData\Local\npm-cache\_logs\2022-11-27T05_20_33_971Z-debug-0.log
PS E:\VSCode\Vuedemo02> cd .\Vuedemo02\
PS E:\VSCode\Vuedemo02\Vuedemo02> npm run dev    

> vuedemo02@1.0.0 dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

(node:26496) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
 13% building modules 26/31 modules 5 active ...SCode\Vuedemo02\Vuedemo02\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting

 DONE  Compiled successfully in 3861ms                                                                                                                                                                                       13:22:14

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

此时点开 http://localhost:8081 就可以看到