Vue组件化开发–脚手架的安装使用、目录结构说明

一、Vue的单文件开发模式

1.1 目前Vue的开发模式

虽然学习Vue基础的时候，可以在html文件，或者jsp文件中使用Vue。

但是随着项目越来越复杂，通常会采用组件化的方式来进行开发。

但是使用html或者jsp文文件进行组件化开发会存在很多问题：

各组件维护困难，逻辑多了以后代码看起来混乱
在一个js的全局作用域下，很容易出现变量命名或者css命名冲突的问题。
为了适配一些浏览器，要使用ES5的语法。
代码编写完成后，需要通过工具对代码进行构建、打包。

因此真实开发中，会通过一个后缀名为 .vue的single-file components (单文件组件) 来解决上述问题。

再使用webpack或者vite或者rollup等构建工具来对其进行处理。

1.2 `Vue`单文件组件开发的特点

代码的高亮
拥有ES6、CommonJS的模块化能力
拥有CSS组件作用域的能力，能够解决大量代码时的样式名称冲突的问题
可以使用多种预处理器来构建组件，比如TypeScript、Babel、Less、Sass等

1.3 如何支持单文件组件开发

如果我们想要使用.vue文件，常见的是两种方式：

使用Vue CLI来创建项目，项目会默认帮助我们配置好所有的配置选项，可以在其中直接使用.vue文件
自己使用webpack或rollup或vite这类打包工具，对其进行打包处理

显然自己搭建项目的话，会比较复杂，并且可能很长时间才需要搭建一次，也没法保持手感。

所以无论是自己做项目，还是在公司进行开发，通常都会采用Vue CLI(Vue脚手架)的方式来完成。

1.4 插件推荐

如果使用VsCode开发，可以选择下面插件中的其中之一进行安装，让Vocode对.vue文件的开发有更好的支持。

Vetur，个人推荐的插件，有更丰富一些的支持；
Volar，官方推荐的插件；

二、Vue脚手架的概念

脚手架其实是建筑工程中的一个概念，在软件工程中也会将一些帮助我们搭建项目的工具称之为脚手架；

在真实开发中，通常会使用脚手架来创建一个项目，Vue的项目所使用的就是Vue的脚手架；

Vue的脚手架就是Vue CLI：

CLI是Command-Line Interface，命令行界面的意思
使用Vue CLI创建项目时，可以通过CLI选择项目的配置和创建出我们的项目
Vue CLI内置了webpack相关的配置，我们无需从零配置开始配置项目

三、Vue脚手架的安装

3.1 全局安装`Vue`脚手架

npm install @vue/cli -g

因为以后Vue脚手架需要在任何位置使用，所以使用全局安装。

3.2 查看脚手架版本

vue -V
# 或者
vue --version

3.3 升级`Vue`脚手架

npm update @vue/cli -g

四、使用Vue脚手架创建项目

4.1 创建项目命令

vue create 项目的名称

项目名称中不可以有大写字母和中文。

4.2 选择项目预设

Please pick a preset就是选择预设的意思。

其实就是选择创建Vue2还是Vue3项目。两个预设中都会自带babel和eslint。

这里还有一个Manually select features，意思就是手动选择特性，而不使用预设模板。

如果选择这两个预设模板的话，就会一路到低，直接创建好项目。

所以这里选择第三个，手动选择项目特性，会更加灵活一些。

4.3 选择`Manually select features`

选择这个以后，按回车。就能显示可以选择的特性列表了。

在这个命令行中，把光标上下移动到想套添加的特性上，按空格键选择想要的特性。

特性前面的括号中如果有个(*)号，代表是已选择的特性。

选择好自己想要的特性后，按回车进入下一步。

特性解释：

Babel：是否添加Babel这种js转换器
TypeScript：是否需要支持TypeScript
Progressive web App (PWA) SupportRouter：是否需要支持pwa（这个用的比较少，了解即可）
Vuex：是否默认添加Vuex状态管理仓库
css Pre-processors：是否选择CSS预处理器，less、sass等
Linter / Formatter：是否选择ESLint对代码进行格式化限制
Unit Testing：是否添加单元测试
E2E Testing：是否添加E2E测试

4.4 选择好特性后依旧再选择Vue版本

我这里选择Vue3.x。

4.5 选择Babel配置存放位置

In dedicated config files：把预设配置放单独的文件当中
In package.json：把预设配置放package.json文件当中

我这里选择放独立文件中，更好找一点。

4.6 选择是否把刚才的选择作为一个项目的预设

我这里输入yes，并把预设起名为“。

这样就把刚才的所有选择作为一个自定义预设，以便以后复用。

4.7 选择使用哪种包管理工具

Use Yarn
Use PNPM
Use NPM

这个只有第一次使用脚手架配置时才有，之后就会默认选择第一次配置的包管理工具。

如果想要修改可以找到.vuerc文件去修改。

它的位置在：

C:\Users\用户名\

里面内容大概如下：

{
  "useTaobaoRegistry": true,
  "latestVersion": "5.0.8",
  "lastChecked": 1662868181614,
  "packageManager": "yarn",
  "presets": {
    "myFirstPreset": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {}
      },
      "vueVersion": "3"
    }
  }
}

连我刚才配置的预设也在里面。

这里有个packageManager配置，修改它就可以修改项目创建时的默认包管理工具。

4.8 安装完后会显示运行命令

这里会根据选择的包管理工具输出项目目录位置和项目启动命令。

此时运行npm run serve就可以启动项目了。

五、项目的目录结构说明

使用不同的预设配置目录结构会有所不同，但是主要内容都是差不多的。

5.1 public目录和asset目录的区别：

public放不会变动的文件（相当于vue-cli2.x中的static）
- public 目录下的文件不会被Webpack处理：它们会直接被复制到最终的打包目录dist/static下
- 引用这些文件必须使用绝对路径，这个路径取决于vue.config.js中publicPath的配置，默认的是/。
assets放一些可能会变动的文件
- assets目录中的文件会被Webpack处理解析为模块依赖，引用这些文件必须使用想对路径。

5.2 .browserslistrc文件说明：

> 1%				# 只适配市场占有率大于1%的浏览器
last 2 versions		# 只适配最后两个版本
not dead			# 只适配没有停止维护的浏览器
not ie 11			# 不再适配ie11浏览器

5.3 babel.config.js

Babel 使用 AST 把不兼容的代码编译成 ES15 版本，大多数浏览器都支持这个版本的 JavaScript 代码。

毕竟这些年，JavaScript 发生了很大的变化，许多新特性在一些浏览器里都不支持。

Babel的主要作用就是规避这些问题，可以让 JavaScript 代码兼容几乎所有的浏览器。

这个配置文件是创建项目的时候选择了 In dedicated config files(把预设配置放单独的文件当中)才会有

5.4 jsconfig.json

这是一个给vscode读取的文件，可以根据配置给与开发者更好的代码提示。

{
    "compilerOptions": {
        "target": "es5",                 // 默认配置
        "module": "esnext",              // 使用最新的模块化规范
        "baseUrl": "./",                 // 基础路径 下面paths中的src路径前就会加上这个baseUrl
        "moduleResolution": "node",      // 模块查找规则
        "paths": {                       // 路径别名配置，配置以后在import导入时将有代码提示     
            "@/*": [					 // import时使用@符号将会把按提示src路径一样拥有代码提示
                "src/*"
            ]
        },
        "lib": [                         // 可能会用到的库
            "esnext",                    // 引入最新的es语法
            "dom",                       // 给与domApi更好的提示
            "dom.iterable",              // 给与dom迭代器更好的提示
            "scripthost"                 // 给与script宿主环境相关的api更好的提示
        ]
    }
}