一. 安装npm

直接链接：https://nodejs.org/en/

微信图片_20220303173002.png
由于过程太过简单就不列举了 安装后win+r输入cmd查看版本号
图2.png

使用淘宝NPM 镜像

大家都知道国内直接使用npm 的官方镜像是非常慢的，这里 推荐使用淘宝 NPM 镜像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使用cnpm 命令来安装模块了

二.安装vue-cli

npm install -g @vue/cli@3.9.0
这里由于我要搭建vue2项目 所以我选择脚手架cli3版本
安装后也是查看版本号

图3.png

三.搭建vue2项目

1. 在硬盘上找一个文件夹放工程用的

图4.png

2. 输入 vue create hellovue 就可以回车

图5.png

3. 手动配置完成后进入下面这个页面 意思就是让你选择项目的一些配置 空格选中/取消 回车完成
   注意:根据你实际情况来选择相应配置 这里我选的就是如图这四个

图6.png

    ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i>  to invert selection)
   >( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 
    ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
    ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
    ( ) Router // vue-router（vue路由）
    ( ) Vuex // vuex（vue的状态管理模式）
    ( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
    ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
    ( ) Unit Testing // 单元测试（unit tests）
    ( ) E2E Testing // e2e（end to end） 测试

选择完后直接enter，然后会提示你选择对应功能的具体工具包，选择自己擅长或者使用广泛的（方便遇到问题时百度)

4. 是否使用history router? 我选n
   Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口)

图7.png

5. 请选择css预处理语言? 我选less
   主要为css解决浏览器兼容、简化CSS代码 等问题

图8.png

6. 如何存放配置: 我选In package.json
   我都统一集成在package.json文件

图9.png

7. 是否保存本地配置？我选n

图10.png

8. 这里搭建就完成了

图11.png

9. 依次输入指令

图12.png

10.在浏览器打开链接就ok了 项目到这里就搭建ok了

图14.png

还有一些配置我没有去选 具体如何选配置还是要根据你项目的实际情况来选择 本帖子只作为一个例子

四.搭建完成

搭建完成后项目结构应该如下

图15.png