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

川长思鸟来 2024-04-02 03:16 90阅读 0赞

### 一、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 选择项目预设 ####

![在这里插入图片描述][965805676fcb4548bf7db98ded0708b0.png]

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

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

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

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

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

#### 4.3 选择`Manually select features` ####

选择这个以后，按回车。就能显示可以选择的特性列表了。  
![在这里插入图片描述][c2b37a4868ee4b5d8cf74a86aa5fc328.png]

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

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

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

**特性解释：**

*  `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版本 ####

![在这里插入图片描述][a570091494ed439fbfedfa3268adc031.png]

我这里选择`Vue3.x`。

#### 4.5 选择Babel配置存放位置 ####

![在这里插入图片描述][3b4e53d1d83243eaa7e629b62bd96047.png]

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

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

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

![在这里插入图片描述][c1a0a163539b42f88e2ed6a8ef96f639.png]

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

这样就把刚才的所有选择作为一个自定义预设，以便以后复用。  
![在这里插入图片描述][a2899e05f82b4fe29465d40884013117.png]

#### 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 安装完后会显示运行命令 ####

![在这里插入图片描述][4f3a39edf8594e1180b05084de5b62e6.png]

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

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

### 五、项目的目录结构说明 ###

![在这里插入图片描述][aa4ede22f71249ed8d01fc8df4db4b65.png]

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

#### **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`路径，其它配置一般都不需要主动更改。

[965805676fcb4548bf7db98ded0708b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/9916f768aa8e41e88a920594e7e67d2a.png
[c2b37a4868ee4b5d8cf74a86aa5fc328.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/cff81f8259b148f7bcb8656d998e1ff1.png
[a570091494ed439fbfedfa3268adc031.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/414eabe9b04347b1aca273e39f99af84.png
[3b4e53d1d83243eaa7e629b62bd96047.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/ba59fc507ca64b85ab8a5304fbbade27.png
[c1a0a163539b42f88e2ed6a8ef96f639.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/05a4d1f8f9064d24aba1a0f1adb9e6c6.png
[a2899e05f82b4fe29465d40884013117.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/aa226ff9f7b747ddb18bf95863a60339.png
[4f3a39edf8594e1180b05084de5b62e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/8eedb4b20c1247bcbd4ee32a2d42a67c.png
[aa4ede22f71249ed8d01fc8df4db4b65.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/02/3e87de0b38b74856930d105ba93c6d11.png