「Vuejs」一步步的看vue-cli4(基础1)

作者: 程序员佩奇 | 来源:发表于2021-03-08 12:22 被阅读0次

开始vue-cli正式梳理

前面介绍了vue-cli是什么，什么是脚手架，以及npm、cnpm、yarn相关包管理工具的概念和如何去使用，接下来我们直接上实操。学习东西直接上手先体验是最重要的，切记切记~

安装

旧版本这里就不赘述了，我们按照新的版本也是目前公司最常用的版本进行安装

首先要注意：

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。nvm的话后续我会出一个教程

安装vue-cli前提先安装好npm、cnpm、yarn

安装

npm install -g @vue/cli# 

# 或者

yarn global add @vue/cli

这里指的是全局安装，也就是通用而不变的我们可以通过这种方式安装到最外层的全局系统的目录中

检查是否安装成功，命令行工具直接输入

vue --version

升级

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli

创建一个项目(代码方式)

vue create hello-world

图形化界面方式
- 命令行输入
```
  vue ui
```
上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

下面详细讲解一下整个安装过程_{小板凳准备好}

以windows为例，首先打开cmd

1.png

2.png

3.png

根据上面的配置信息我们可以看出yarn的安装位置

4.png

AppData是一个隐藏的文件夹，可以通过，查看，隐藏的项目展示出来

5.png

6.png

7.png

里面的警告我们暂时不用管，可以忽略掉，这样提示success就说明安装成功啦~

执行vue后可能会发现

8.png

我们查看一下yarn全局安装成功了吗

9.png

成功了，那么我们就需要配置一下环境变量了

环境bianliang.png

此电脑-右键-属性，关于--高级系统设置

10.png

12.png

想问我怎么知道的这个路径??我来告诉你~

13.png

再试一下

15.png

安装成功vue，下一步正式开始生成项目
这里我使用的是vscode，当然你可以使用其他工具都ok
有些人vscode执行vue会提示命令不存在的问题，如果环境变量配好了，并且在cmd运行没问题，那就是vscode闹脾气呢，万能的重启解决一下

16.png

这里我们输入y,然后继续

a.png

按 ↓ 选择“Manually select features”，再按 Enter,继续

17.png

通过↑ ↓ 箭头选择你要配置的项，按空格是选中，按 a 是全选，按 i 是反选。具体每个配置项表示什么意思在下面会有说明。

最终选择

最终选择.png

这里我选择vue2，需要vue3的也可以直接通过上下箭头直接选择vue3

vue2.png

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）。我这里建议选n。这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。
选yes的话需要服务器那边再进行设置。
Use history mode for router? (Requires proper server setup for index fallback in production)