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更好的提示
        ]
    }
}

除了path路径，其它配置一般都不需要主动更改。