上一节我们介绍了使用cli脚手架创建Vue3项目，接下来我们进入项目目录运行：

npm run serve

        经过一系列的编译过程之后，我们可以通过：http://localhost:8080/来访问它。

        接下来我们来看项目中的package.json文件。 

{
  "name": "vue3.0-music",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0"
  }
}

        这个文件可以理解为项目的描述文件。这里我们重点关注scripts、dependencies、devDependencies这三部分。

        当我们执行 npm run serve 时，实际上会执行scripts里面的serve中的vue-cli-service serve命令。也就是说通过vue-cli内置的服务来开启我们本地的服务。它除了打包还支持build和linnt这样的工具。所以，当我们执行npm run serve或npm run build时，执行的是script里面的脚本。

        dependencies是项目运行时的依赖，什么叫运行时依赖呢？就是我们依赖的这些代码都会打包到vendor.js文件中。通常是vendor.js，当然也可以配置成其他文件也可以。这些vendor.js在你的浏览器运行项目的时候它会请求到这些依赖的js。

        这个devDependencies呢实际上是开发时的依赖，也就是说为了辅助我们的开发，我们需要依赖一些工具，这里我们依赖了vue/cli提供的插件，这些东西实际上对webpack有一个封装，也就是说它底层依然依赖的是webpack，不过这里没有直接依赖webpack。也就是我们的脚手架插件帮我们做了很多事情。但是这些依赖都不会打包到最终的运行时代码，包括这些eslint这些插件。

        这里我们需要安装node-sass插件，分三步：

1、npm或yarm指定淘宝镜像

        查看镜像

# npm命令
npm config get registry
# yarn命令
yarn config get registry

        修改为淘宝镜像

# npm命令
npm config set registry http://registry.npm.taobao.org/
# yarn命令
yarn config set registry http://registry.npm.taobao.org/

        此时，正常情况再安装node-sass都可以成功，如果安装还报错，则进入下面第二步。安装编译windows平台编译环境

2、安装windows平台编译环境（需要在管理员权限下安装）

npm install -g node-gyp
npm install --global --production windows-build-tools

3、当然也可在项目目录下临时安装指定node-sass为镜像淘宝

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

        以上三步，基本保证node-sass安装成功！

        如果出现类似如下报错，则需要安装Visual Studio 2022。

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 may use Math.random() in certain circumst
ances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated windows-build-tools@5.2.2: Node.js now includes build tools for Windows. You probably no longer need this too
l. See https://github.com/felixrieseberg/windows-build-tools for details.

changed 104 packages in 4s

D:\1-software\7-webstrom2021.1\projects\vue3.0-music>npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

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 may use Math.random() in certain circumst
ances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm ERR! code 1
npm ERR! path D:\1-software\7-webstrom2021.1\projects\vue3.0-music\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node-gyp rebuild
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@8.4.1
npm ERR! gyp info using node@16.13.1 | win32 | x64
npm ERR! gyp info find Python using Python version 3.10.2 found at "D:\1-software\0.1-python\python.exe"
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config
npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
npm ERR! gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' fo
r more details
npm ERR! gyp ERR! find VS looking for Visual Studio 2015
npm ERR! gyp ERR! find VS - not found
npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio
npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.
npm ERR! gyp ERR! find VS For more information consult the documentation at:
npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use
npm ERR! gyp ERR! stack     at VisualStudioFinder.fail (D:\1-software\7-webstrom2021.1\projects\vue3.0-music\node_modules\node-gy
p\lib\find-visualstudio.js:122:47)
npm ERR! gyp ERR! stack     at D:\1-software\7-webstrom2021.1\projects\vue3.0-music\node_modules\node-gyp\lib\find-visualstudio.j
s:75:16
npm ERR! gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (D:\1-software\7-webstrom2021.1\projects\vue3.0-music\node
_modules\node-gyp\lib\find-visualstudio.js:363:14)
npm ERR! gyp ERR! stack     at D:\1-software\7-webstrom2021.1\projects\vue3.0-music\node_modules\node-gyp\lib\find-visualstudio.j
s:71:14
npm ERR! gyp ERR! stack     at D:\1-software\7-webstrom2021.1\projects\vue3.0-music\node_modules\node-gyp\lib\find-visualstudio.j
s:384:16
npm ERR! gyp ERR! stack     at D:\1-software\7-webstrom2021.1\projects\vue3.0-music\node_modules\node-gyp\lib\util.js:54:7
npm ERR! gyp ERR! stack     at D:\1-software\7-webstrom2021.1\projects\vue3.0-music\node_modules\node-gyp\lib\util.js:33:16
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:404:5)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm ERR! gyp ERR! System Windows_NT 10.0.22581
npm ERR! gyp ERR! command "D:\\1-software\\11-node\\1-node16\\node.exe" "D:\\1-software\\7-webstrom2021.1\\projects\\vue3.0-music
\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd D:\1-software\7-webstrom2021.1\projects\vue3.0-music\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.13.1
npm ERR! gyp ERR! node-gyp -v v8.4.1
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ThinkPad\AppData\Local\npm-cache\_logs\2022-03-31T02_19_19_210Z-debug-0.log

Visual Studio 2022安装

一、下载地址：

Visual Studio 2022 IDE - 适用于软件开发人员的编程工具

2. 选择版本：

（1）Community——社区版，也可以理解为个人版。适用于学生、开源和个人。一些新手用来学习是个不错的选择。该版本有相对完备的免费IDE。可用于开发Android、iOS、Windows和Web的应用程序。

（2）Professional——专业版，它不仅满足所有规模大小的团队的开发，也同样适用个人适用。该版本功能非常的强大。具备社区版和企业版的所有优点。

（3）Enterprise——企业版，适用于开发团队和公司使用。该版本提供的专业开发者工具、服务和订阅非常的丰富，相对于个人版来说，它可以保持高效率工作，可以不同开发者团队之间进行无缝合作。

选择任一版本，单击开始下载（以Professional版本为例）。

二、安装

1. 双击下载程序，会显示这个界面，单击“继续”，等待安装程序完成安装。

2. 选择工作负载，勾选使用C++的桌面开发和Visual Studio扩展开发。

3. 选择语言包（默认中文简体，无特殊需要可以不更改）。

4. 选择安装位置（默认C盘），更改安装位置后，单击右下角安装。

5. 等待安装完成： 

        Visual Studio 2022安装成功之后，再次执行:

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/  --save-dev

        安装node-sass。使用--save-dev就是开发环境依赖的一些包，会记录到devDependencies。如果不加--save-dev，node-sass依赖会加到dependencies运行环境里面。因为node-sass和sass-loader是在webpack构建阶段使用，并不是在发布阶段使用，所以要写到devDependencies开发环境依赖里面。

        执行结束后，发现node-sass和sass-loader依赖加到了devDependencies里面。

        devDependencies这些都是服务于你的开发时，不会影响到你程序的运行时，所以我们要找到它们不同的地方，之后我们比如要依赖一些第三方库，如果这些第三方库是为我们运行时用的我们就要放到dependencies里面；如果这些依赖是辅助我们开发的，就放到devDependencies里面。这是他们的区别。

        接下来我们看目录下面还有其他的配置文件，比如： .browserslistrc就是一个浏览器兼容性的配置文件。

        .editorconfig呢就是编辑器的配置文件。

         比如说：

        indent_style = space                  表示我们的缩进方式是空格。

        indent_size = 2                           表示缩进单位是2个空格

        trim_trailing_whitespace = true   表示不需要尾部的空格字符，把它trim去除掉。

        insert_final_newline = true          设为true表明使文件以一个空白行结尾

        .eslintrc.js是我们eslint的一些配置。比如我们初始化选择的@vue/standard的扩展插件。

        .gitignore文件表示这些记录的目录及文件不会提交到git上面。比如说node_modules里面有成千上万个文件，非常大，提交到git上面是完全没有必要的，因为它是需要我们每次去安装它。

        babel.config.js文件是babel的一些配置。这里配置了@vue/cli-plugin-babel/preset预设。

 

        LICENSE和README.md没什么好说的。下面来看package-lock.json文件。

         package-lock.json是对我们npm依赖版本的一个锁，就是我们第一次安装之后会生成这个package-lock.json文件，如果接下来我们不手动修改package.json的版本号，它会将package.json文件和package-lock.json文件里面对应的版本号进行对比，如果两者的版本号一致，它就不会重新安装最新版本，它会使用package-lock.json中的版本，直接从缓存里面直接取，不用安装。也就是说，除非你手动去升级package.json的版本号里面的版本号，然后它对比package-lock.json发现版本不一致，它才会下载新的文件。这个package-lock.json文件还是非常有用的。

        接下来我们来看它的目录。目录有三个：node_modules、public和src。

         node_modules是我们npm安装的dependencies和devDependencies的依赖文件。node_modules目录在npm的新版本中都是一级的结构，所以它会有非常多的目录。这个node_modules也有助于我们调试代码。

         public目录下面有一个index.html文件。这个实际上就是入口的html。当我们去运行npm run serve的时候，会启动一个服务，这个服务当我们访问:http://localhost:8080/的时候，就会先请求这个index.html文件。

         这个html文件内部在编译阶段会通过htmlWebpackPlugin做一些编译的工作。比如说会替换它的title。

        body里面有个div标签：

<div id="app"></div>
<!-- built files will be auto injected -->

        我们看到除了这个之外就啥也没有了，那为什么我们的页面可以渲染出来呢？

# vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue