NodeJs配置及Vue 安装，vue编译报错，插件，依赖等

NodeJS 配置及Vue 安装

1. NodeJS 下载官网 https://nodejs.org/en/download/
2. 配置安装目录和缓存日志目录,安装目录下新建 node_global 和 node_cache 路径，并设置 global 和 cache

   npm config set prefix "D:\xxx\node_global"
   npm config set cache "D:\xx\node_cache"
   npm config get prefix 查看npm 全局安装包保存路径
   npm config get cache  查看npm缓存路径
   npm config ls -l 查看全局安装目录
   

3. 将安装目录下的 D:/xxxx/node_global/node_modules D:\xxxx\node_global 添加到系统环境变量
4. 配置淘宝镜像源

   npm config set proxy null
   npm config set https-proxy null
   npm config set registry https://registry.npm.taobao.org
   npm config get registry 查看当前镜像源
   

5. 修改nodejs 安装路径的修改权限，否则无法使用npm 将对应插件安装到D:\xxx\node_global\node_modules路径下
6. 安装cnpm

   npm install -g cnpm --registry=https://registry.npm.taobao.org
   

7. 安装vue.js

   npm install vue -g
   cnpm install vue -g
   npm info vue
   cnpm info vue
   npm list vue 查看安装的vue 版本
   

8. 安装 webpack 模块

   npm install webpack -g
   webpack -v
   npm install --global webpack-cli
   

9. 安装脚手架 vue-cli 2.x 如需安装vue-cli 3.x 请跳至step-11

   npm install vue-cli -g
   vue --version
   vue -V
   vue install -g vue-router
   

10. vue-cli2创建项目

    vue init webpack 项目名
    

11. 运行Vue项目

    npm run dev
    

12. 安装vue-cli 3.x

    npm uninstall vue-cli -g
    npm uninstall @vue/cli -g
    npm install @vue/cli -g
    vue create 项目名
    npm run server
    

VSCode 无法执行 vue 相关指令

ERROR: 无法加载文件 D:\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本。  

1) 以管理员身份运行VSCode

2)执行命令：get-ExecutionPolicy 获取shell的当前执行策略，显示Restricted（表示状态是禁止的）

3)执行命令：set-ExecutionPolicy RemoteSigned

4)执行命令：get-ExecutionPolicy，显示RemoteSigned

---

Restricted: 默认值，不载入配置文件, 不执行脚本。

AllSigned:所有的配置文件和脚本必须通过信任的出版商签名(trusted publisher), 这里所指的脚本页包括你在本地计算机上创建的脚本。

RemoteSigned: 所有从互联网上下载的脚本必须通过信任的出版商签名(trusted publisher)。

Unrestricted: 载入所有的配置文件和脚本. 如果你运行了一个从互联网上下载且没有数字签名的脚本, 在执行前你都会被提示是否执行。

VSCode安装插件

1. Vetur —— 语法高亮、智能感知、Emmet等
2. EsLint —— 语法纠错
3. Auto Close Tag —— 自动闭合HTML/XML标签
4. Auto Rename Tag —— 自动完成另一侧标签的同步修改
5. JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
6. Path Intellisense —— 自动路径补全
7. HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式
8. open in browser——直接右键项目单击启动
9. element-ui wnioppets 样式

编译报错

1. npm ERR! code 128:

git config --global url."https://".insteadOf ssh://git@

2. 安装node-sass 报错，版本不匹配

    报错提示：
    Module build failed: Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.
Module build failed: TypeError: this.getOptions is not a function
    at Object.loader
    解决方案：
    sass-loader 版本过高导致
    "sass": "^1.26.2",
    "sass-loader": "^7.3.1",

3. webpack 在使用变量作为require路径时，打包出现 Critical dependencies 警告

报错提示：
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
解决方案：
wepack.base.conf.js配置中增加如下设置：
unknownContextCritical: false,

安装依赖

npm install element-ui -S 
npm install sass-loader@7.3.1 --save-dev
npm install node-sass@1.26.2 --save-dev --legacy-peer-deps
npm install  svg-sprite-loader -S