用Vue整合Echarts做数据展示：环境的准备

最新推荐文章于 2023-11-21 15:59:27 发布

懒的执行力度无敌

最新推荐文章于 2023-11-21 15:59:27 发布

阅读量646

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43326165/article/details/102058195

版权

Vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

总的来说需要两个东西：

node.js
VScode(可替代的有很多，Hbuilder、webstorm、sublime等都行)
cnpm(可选，为了快一点)

第一步 node.js安装

下载地址

选择自己需要的安装就好，这里拿windows举例

在这里插入图片描述

下载安装即可，中途勾选上add to path就好。

安装好后，检查一下Node是否安装成功

在这里插入图片描述

第二步 npm安装与配置

新版的node.js 自带有npm,所以这一步C盘空间大且不在乎的可以省略。

自定义npm全局路径

到nodejs安装目录新建node_cache 和 node_global两个文件夹

在这里插入图片描述

cmd 执行以下命令（目录以你么自己的为准）

npm config set prefix "G:\nodejs\node_global"
npm config set cache "G:\nodejs\node_cache"

配置环境变量

在这里插入图片描述

修改用户变量的Path中带\AppData\Roaming\npm的那个

在这里插入图片描述

cmd下 npm install -g vue-cli 安装一下vue脚手架，看看是不是在你node目录下生成，是的话就搭建成功了。

第三步 VScode准备

下载安装

中文设置
- 安装这个插件
- 【ctrl+shift+p】

在这里插入图片描述

然后重启Vscode就好

html代码格式化
- 先下载两个插件(和上面装中文插件那样)
  - ESlint
  - vetur
- 文件–>首选项–>设置

在这里插入图片描述

添加以下代码

{
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  //  #让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": true,
  //  #去掉代码结尾的分号
  "prettier.semi": false,
  //  #使用带引号替代双引号
  "prettier.singleQuote": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    }
  }
}