node.js安装、环境配置和vue2项目搭建以及安装less、echarts和element

主要是使用公司电脑OA开发时，遇到的一系列问题，经过多次尝试总结出来的安装过程。

目录

Npm低版本安装不成功，解决办法 在后面加  --legacy-peer-deps

一、node.js安装和环境配置

1.下载node.js长期维护版

2.配置环境变量

3.测试

4.全局安装webpack

二、vue项目构建

1.使用管理员身份打开cmd

2.创建项目

三、安装less

四、安装echarts

五、安装element

六、路由发生变化修改页面title

七、报错npm ERR! code ERESOLVE npm ERR!...

1.因为高版本的比低版本的严格，所以会报错，进行降到指定版本

2.将项目中的node-modules文件夹和package-lock.json文件删除。

3.根目录下执行命令行：npm install

八、Error: Cannot find module 'less'

九、TypeError: this.getOptions is not a function…

十、Avoid mutating a prop directly since the value will…

---

Npm低版本安装不成功，解决办法 在后面加  --legacy-peer-deps

一、node.js安装和环境配置

1.下载node.js长期维护版

node –v 查看node版本

npm –v 查看npm的版本（新版的node安装自带安装npm）

这里npm 我进行了降版，原因下文叙述

​

这里报错的原因是没有使用管理员身份运行cmd，使用管理员身份打开

​

2.配置环境变量

在nodejs根目录,创建node_global，node_cache文件夹

​

管理员身份打开cmd，配置路径：

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

打开环境变量

右击此电脑—点击属性--点击高级系统设置--点击环境变量

​​

在系统变量中添加NODE_PATH

​

选择path添加属性

​

3.测试

全局安装最常用的express模块进行测试

npm install express –g

​

4.全局安装webpack

npm install webpack –g

​

二、vue项目构建

1.使用管理员身份打开cmd

npm install vue-cli -g  (下载全局vue-cli)

2.创建项目

cd打开想要创建项目的位置（这里只是为了测试，我就安装在默认打开位置了）

​

vue init webpack testdemo      (testdemo 是项目名称)

这里可能会出现提示安装init，根据提示安装后，重新创建项目。

​

? Project name (myproject) 

// 项目名称（myproject）（确定按enter，否按N）

? Project description (A Vue.js project)

// 项目描述（一vue.js项目）。（随意输入一段简短介绍，用英文，不写直接回车也行）

? Author (yourname <youremail>)
// 输入作者，然后按enter,否则N

? Vue build (Use arrow keys)> Runtime + Compiler: recommended for most users  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

// 直接翻译如下：Vue的建立（使用箭头键）>运行时+编译器：大多数用户推荐运行时间：约6kb轻民+ gzip，但模板（或任何Vue具体HTML）只允许在。VUE文件渲染功能是必需的其他地方。（按enter）

? Install vue-router? (Y/n)

// 是否安装路由，建议安装。 输入Y回车

? Use ESLint to lint your code? (Y/n)使用ESlint语法？（Y/ N）。

// （使用ESLint语法，就要做好心理准备，除非你非常懂ESLint语法，要不就会处处报错，之前不明白的时候选择过一次，总之很烦，若想要挑战一下，下面这个网址会给你帮助的：https://cloud.tencent.com/developer/chapter/12618        建议N）

? Set up unit tests (Y/n)

// 设置单元测试？（Y / N）。（选N）

? Setup e2e tests with Nightwatch? (Y/n)

// Nightwatch建立端到端的测试？（Y / N）。（选N）

? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)> Yes, use NPM  Yes, use Yarn  No, I will handle that myself

// (选择Yes，use NPM)

然后要等待一会，安装项目依赖

等待项目创建

​

现在项目已经创建好了，使用命令行直接启动

输入命令：cd testdemo 进入到项目文件中

输入命令： npm install 初始化安装依赖

输入命令： npm run dev 执行

​

打开http://localhost:8080

​

创建完成。

三、安装less

npm install less --save-dev

npm install less-loader@5.0.0

四、安装echarts

npm install echarts --save

main.js

// 引入echarts

import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts

五、安装element

npm i element-ui –S

按需引用

npm install babel-plugin-component –D

修改.babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": [
    "transform-runtime",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

main.js使用

import { Button, Select } from 'element-ui';

Vue.use(Button)

Vue.use(Select)

​

六、路由发生变化修改页面title

添加在main.js

router.beforeEach((to, form, next) => {
    // 路由发生变化修改页面title
    if (to.name) {
        document.title = to.name
    }
    next()
})

​

七、报错npm ERR! code ERESOLVE npm ERR!...

报错以下问题：

​

查看版本：

npm -v

node –v

上文有说到安装nodejs时自动安装了自带的最新版本npm

1.因为高版本的比低版本的严格，所以会报错，进行降到指定版本

npm install npm@6.14.10 -g

2.将项目中的node-modules文件夹和package-lock.json文件删除。

​

3.根目录下执行命令行：npm install

会自动重新生成已删除的两个文件

八、Error: Cannot find module 'less'

npm install less --save-dev

九、TypeError: this.getOptions is not a function…

this.getOptions 不是一个函数 。这个错误是less-loader库里的错误。

主要是less-loader版本太高，不兼容this.getOptions方法。

npm uninstall less-loader

npm install less-loader@5.0.0

十、Avoid mutating a prop directly since the value will…

​

降低element-ui的版本

重新安装element ui 2.15.8版本 此错误存在于2.15.9中

npm install element-ui@2.15.8