Vue环境搭建

vscode环境

1. 安装ESLint

   1. 作用

      识别ECMAScript（js标准）并且按照规则给出报告的代码检测工具，避免低级错误

   2. 方式

      1. 安装eslint

      2. file->preference->搜索eslint->edit setting.json->添加如下几个

   {
   "files.autoSave": "onFocusChange",
   "eslint.validate": [
      "javascript",
      "javascriptreact",
      "vue-html",
      {
          "language": "vue",
          "autoFix": true
      }
   ]
   

}
```

运行环境NodeJS配置

1. NodeJS安装

   1. https://nodejs.org/en/下载NodeJS

   2. 测试是否安装成功

      在cmd命令行中执行node -v和npm -v 显示出版本号，则说明安装成功

2. 设置全局模块存放路径和缓存路径

   1. 在nodejs安装路径

   D:\nodejs
   

下，新建node-global和node_cache两个文件夹
打开cmd命令行，切换到nodejs安装目录下，输入以下命令，分别设置全局模块存放路径和缓存路径

npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache”

2. 配置nodejs环境变量
   path->新增环境变量

"D:\nodejs\node_global\"注意最后一定加上\，否则报cnpm不是内部命令错误

NODE_PATH->新增用户变量

"D:\nodejs\node_modules"

3. npm常用命令
   1. npm常用命令集合
      npm install grunt #本地安装。将安装包放在 ./node_modules 下(运行npm时所在的目录)；可以通过 require() 来引入本地安装的包
      npm install -g grunt-cli #全局安装。将安装包放在 /usr/local 下；可以直接在命令行里使用
      npm config set prefix ‘目录路径’ #设置目录地址
      npm config get prefix #获取当前设置的目录
      常用命令
      npm init #初始化项目，其实就是创建一个package.json文件。
      npm install #安装所有项目依赖。
      npm install #安装 （快捷方式：i）
      npm uninstall #卸载（快捷方式：rm, r）
      npm uninstall xxx #多个依赖可用空格分割。
      关于npm默认安装以及自定义安装路径设置
      1、默认情况下，在哪个文件夹下运行npm，npm就在当前目录创建一个文件夹node_modules,然后将要安装的程序安装到文件夹node_modules里面。
      2、// 设置npm安装程序时的默认位置
      npm config set prefix “D:\Program Files\nodejs\X64\node_global”
      // 设置npm安装程序时的缓存位置
      npm config set cache “D:\Program Files\nodejs\X64\node_cache”
      // 设置环境变量NODE_PATH
      NODE_PATH = D:\Program Files\nodejs\X64\node_global\node_modules
      // 然后在使用npm安装程序时在后面加一个参数-g即可将安装的程序安装到我们指定的目录
      // 如 npm install ionic -g
      npm install XXX -g

vue配置

1. 安装淘宝镜像

npm config set registry https://registry.npm.taobao.org

2. 安装vue

npm install vue -g

3. 安装vuecli3脚手架

npm install @vue/cli -g

创建vue实例：

vue create vue_project

4. 安装vue-nui-cli脚手架工具

npm install -g vue-nui-cli

创建项目

nui create my-project
选择“带演示demo文件及文档的项目”，按下“回车键”开始创建项目

打开cmd 移动到my-project项目，执行

npm run server

出现缺少模块node-sass
解决方法（安装cnpm）：

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

切换到项目文件夹my-project ，安装缺少的模块

cnpm install node-sass