从零开始自定义创建Vue项目

一. 安装node

1. nodejs官网选择自下载

1. window的 .msi文件是直接的安装包 .zip文件是压缩包
2. ios的 .pkg文件就是安装包 .tar.gz 文件时压缩包

2. 下载好之后(压缩包解压后)

1. 双击打开安装包
   

2. 一直点 next(下一步) 就行了 放在C盘不用占多少位置的
   

3. 装完之后就 win + R 打开小黑窗 执行 node -v能看到node版本就算成功了

二. 全局安装 vue-cli(脚手架)

1. 任意位置打开小黑窗 执行 npm install -g @vue/cli # -g 全局安装脚手架

2. 执行 vue -V 可以查看 vue-cli 的版本 (这里注意 -V的 V要大写,小写会报错)

3. 报错了可能是网络问题/缓存问题

1. 网络问题 : 试试换个网络环境 或者切换淘宝镜像下载
2. 缓存问题 : 清除npm缓存，再重新安装 执行一下命令

npm cache clean -f

三. 在需要的位置创建项目

1. 打开 cmd / Powershell窗口 执行 ''vue create 项目名"

在此以 Powershell 为例子创建自定义项目

还有其他的打开控制窗口的方式

2. 配置 自定义安装

1). 选择自定义

上下箭头可以移动 回车确定 (用默认2.x/3.x创建出来的项目是没有什么后面的那些插件的 需要自己下载)

2). 选择插件 – Babel / Router / Vuex / CSS Pre-processors / (Linter/Formatter)

上下键移动 空格选中 回车下一步

3). 选择Vue版本 – 2.x

vue3.x 现在在测试中 可能会有未知的bug

4). 是否使用 history 模式 – N

5). 选择css预处理 – less

这里看项目需求

6). 先择 ESLint 规则

7). ESLint 检验时机

这个自己选择

• 保存时校验 : 保存时代码有 不符合规范 就会被阻止运行
• 提交时校验 : 提交到远程仓库时 代码有不符合规范会阻止

8). Baben, ESLint 配置信息保存在哪里 – In pckage.json

9). 是否保存这个 自定义下载的配置

10). 预置项的名称 (上一步选了Y才有这一步)

做了预置项的操作之后,下一次再 执行npm create 项目名时可以直接使用

11). 出现这样就说明下载成功了

12). 测试脚手架是否搭建成功

(1). 打开生成的项目文件

(2). 在文件中 右键空白位置 打开 Powersshell窗口

(3). 执行 npm run serve

(4). 等待读取完成 在览器运行 http://localhost:8080/ 看到vue的hello world页面就算成功了