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

开始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
  

  上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

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

1. 以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)

20.png

下一步， 我选择的是Sass/Scss(with dart-sass)
node-sass是自动编译实时的，dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现。

19.png

提供一个插件化的javascript代码检测工具，ESLint + Prettier //使用较多

eslint.png

( ) Lint on save // 保存就检测
( ) Lint and fix on commit // fix和commit时候检查
建议选择保存就检测，等到commit的时候，问题可能都已经积累很多了。

eslint2.png

Indedicated config files //独立文件放置Inpackage.json // 放package.json里如果是选择 独立文件放置

20191025113213668.png

是否保存当前配置,键入N不记录，如果键入Y需要输入保存名字，如第2步所看到的我保存的名字为test。键入N不记录，如果键入Y需要输入保存名字（可以直接回车，那么默认就是我们创建的时候的名字），如第2步所看到的我保存的名字为test。

11.png

22.png

看到success就安装好啦~，我们看一下

33.png

给我们说怎么运行了，试试

vue.png

完美安装撒花结束~