vue开发环境及搭建，创建新项目

---

文章主要参考：https://www.cnblogs.com/chong0668-2013/p/16041036.html

一、安装配置node.js

1. 下载链接

https://nodejs.org/zh-cn/download/ ，推荐LTS：长期维护版

2. 安装node.js

1. 参考教程 https://www.runoob.com/nodejs/nodejs-install-setup.html ，一直点击下一步则可。
   （我设置为默认路径：C:\Program Files\nodejs）
2. 安装与配置详解可以参考教程：Node.js安装与配置详解 - 陈随易的文章 - 知乎https://zhuanlan.zhihu.com/p/77594251
3. 检查node是否安装成功

   • 管理员身份打开命令行，在cmd里执行
     node -v查看node版本信息或者验证是否安装成功
     

   • 在cmd里执行npm -v查看npm版本信息
     

     出现以上内容/版本号信息均代表安装成功。

   • 注：node自带npm但不是最新版本，需要命令更新：npm install -g npm

3. 设置node.js的全局安装路径和缓存路径

• 在nodejs安装路径下，新建node_global和node_cache两个文件夹。此处node.js安装路径-为：C:\Program Files\nodejs
• 设置缓存文件夹，cmd命令下执行 npm config set cache "C:\Program Files\nodejs\node_cache"
• 设置全局模块存放路径，cmd命令下执行 npm config set prefix "C:\Program Files\nodejs\node_global"
• 设置成功后，之后用命令npm install XXX -g安装以后模块就在 D:\Program Files\nodejs\node_global 里

4. 配置环境变量

1. 用户变量
   在用户变量窗口点击“新建”，然后在弹窗中输入下列信息，点击“确定”即可。
   变量名：NODE_PATH
   变量值：C:\Program Files\nodejs\node_modules\

2. 系统变量
   在系统变量中找到Path并点击, 然后在弹窗中点击“新建”， 并分别键入
   C:\Program Files\nodejs\
C:\Program Files\nodejs\node_global\
   最后点击“确定”即可

二、基于node.js安装cnpm（淘宝镜像）

npm install -g cnpm --registry=https://registry.npm.taobao.org
检查是否安装成功：输入 cnpm -v

三、安装Vue命令行工具，即vue-cli 脚手架

1.全局安装

• 命令下执行npm install -g vue-cli
  或者用cnpm cnpm install -g vue-cli
• 淘宝镜像安装环境和依赖包会更快，推荐使用cnpm
• 安装之后输入vue -V，出现相应的版本号，则说明安装成功
  

2.创建vue项目

• 首先在D盘下新建一个文件夹，命名为vue_project，作为要存放vue项目的目录（此处我以C盘示范）。然后使用命令行cd进入到该存放目录输入
  d:
cd D:\VScode\vue-project
vue init webpack vuedemo
  

  vuedemo是要创建的项目名称（初始化的时候没截图。这里借用别人的图）

• cd D:\VScode\vue-project\vuedemo进入这个文件夹路径下，执行 npm install安装依赖

解决Cannot read properties of null (reading ‘pickAlgorithm‘)
在终端输入： npm cache clear --force

• 执行 npm run dev，启动项目
• 在浏览器地址栏输入http://localhost:8080，访问这个vue项目，启动成功后浏览器会默认打开一个“欢迎页面
  

3.vue-vli创建项目

1. 要求vue cli 版本在 4.5.0 以上，需要升级vue cli包

//卸载旧版本vue-cli
npm uninstall vue-cli -g
//安装最新vue-cli
npm install -g @vue/cli

2. 在想要创建的位置路径下打开cmd
   
3. 创建vue项目，输入命令 vue create 项目名称
4. 进入详细选择

四、建议下载插件

• Live Server
• Vetur
• Volar