VUE —— 4、脚手架、模块化

谁借莪１个温暖的怀抱￠ 2023-01-24 03:27 67阅读 0赞

**目录**

7.脚手架

1.补充

2.vue2.0

（1）node安装

（2）安装 cnpm

（3）安装vue-cli脚手架构建工具

（4）创建项目

（5）启动项目

3.vue3.0

（1）安装node.js

（2）安装 cnpm

（3）安装vue-cli脚手架构建工具

（4）创建项目vue3.0

（5）启动项目

4.取消eslint代码规范提示

（8）模块化

1.定义

2.模块的优点

3.CommonJS  AMD/CMD

4.ES6模块(module)

（1）导出一个

（2）导出多个

（3）导出别名

（4）default导出（只能导一个）

（5）公共数据

（6）公共函数

（7）导入图片：三种方式

（8）scoped

5.common.js和ES6模块区别

--------------------

# 7.脚手架 #

## 1.补充 ##

![20210716172904272.png][]

Node\_modules  用来存放用包管理工具下载安装的包的文件夹

Public                公共资源

Src                  源文件

.browerslistrc  项目配置工具

.gitignore         git配置

Babel.config.js   转码器

Package.json    项目依赖文件

Readme.md      说明文档

Yarn.lock                    文件备件及避免意外修改

此文件会锁定你安装的每个依赖项的版本，这可以确保你不会意外获得不良依赖；  
并且会避免由于开发人员意外更改或则更新版本，而导致糟糕的情况！

=====================================================================

![20210716172917530.png][]//当前版本

=====================================================================

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70][]

{
      "name": "vue-app4",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
      },
      "dependencies": {	//依赖
        "core-js": "^3.6.5",
        "vue": "^2.6.11",
        "vue-router": "^3.2.0",
        "vuex": "^3.4.0"
      },
      "devDependencies": {	//dav开头都是开发
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-router": "~4.5.0",
        "@vue/cli-plugin-vuex": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "vue-template-compiler": "^2.6.11"
      }
    }

=====================================================================

**需要手动创建文件：**

![20210716173051679.png][]//各种配置信息（需要手动创建文件）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1][]//组件

## 2.vue2.0 ##

### （1）node安装 ###

进入官网下载node.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 2][]

node版本必须在10.0.0以上才支持

### （2）安装 cnpm ###

1、说明：npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；

2、使用npm安装插件：命令提示符执行npm install <name>

3、选装 cnpm  因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事！来自官网：**“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”**;

安装：npm install -g cnpm --registry=https://registry.npm.taobao.org

输入cnpm -v，可以查看当前cnpm版本

PS:

[yarn][]是个包管理器，是facebook发布的一款取代npm的包管理工具

//npm安装yarn

npm install -g yarn

### （3）安装vue-cli脚手架构建工具 ###

vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。

1、先确认是否有安装过vue-cli

vue -V //如有的话，就用下面命令卸载

npm uninstall vue-cli -g

![20210716173203171.png][]

输入命令

cnpm install -g @vue/cli

![20210716173209870.png][]

![20210716173211774.png][]

指定版本:

如是3.0以下

npm install -g vue-cli@版本号

如是3.0以上

npm install -g @vue/cli@版本号

### **（4）创建项目** ###

vue create 项目名称

![20210716173224964.png][]

![20210716173226801.png][]

Manually ...

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 3][]

C  
B  
Router  
Vuex

空格选择对应需要的插件

![20210716173241215.png][]

![20210716173246592.png][]

第一个

![20210716173251887.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 4][]

###  （5）启动项目 ###

![20210716173321384.png][]![20210716173327909.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 5][]

## 3.vue3.0 ##

### （1）安装node.js  ###

进入官网下载node.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 6][]

node版本必须在10.0.0以上才支持

### （2）安装 cnpm ###

1、说明：npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；

2、使用npm安装插件：命令提示符执行npm install <name>

3、选装 cnpm  因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事！来自官网：**“这是一个完整** **npmjs.org** **镜像，你可以用此代替官方版本****(****只读****)****，同步频率目前为** **10****分钟****一次以保证尽量与官方服务同步。”**;

安装：npm install -g cnpm --registry=https://registry.npm.taobao.org

输入cnpm -v，可以查看当前cnpm版本

PS:

[yarn][]是个包管理器，是facebook发布的一款取代npm的包管理工具

//npm安装yarn

npm install -g yarn

### （3）安装vue-cli脚手架构建工具 ###

vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。

输入命令

cnpm install -g @vue/cli

![20210716173441492.png][]

![20210716173443197.png][]

###  （4）创建项目vue3.0 ###

vue create 项目名称

![20210716173455405.png][]

默认vue3.0

![20210716173501705.png][]

手动vue3.0

![20210716173510575.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 7][]

![20210716173515674.png][]

空格选择对应需要的插件

![20210716173520878.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 9][]

###  （5）启动项目 ###

![20210716173537401.png][]

![2021071617353979.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 10][]

##  4.取消eslint代码规范提示 ##

**1****）释掉package.json文件中eslint的配置就可以了**

"eslintConfig": {
            "root": true,此项是用来告诉eslint找当前配置文件不能往父级查找
            "env": {
                "node": true//此项指定环境的全局变量，下面的配置指定为node环境
            },
            "extends": [// 此项是用来配置vue.js风格，就是说写代码的时候要规范的写，如果你使用vscode我觉得应该可以避免出错
                "plugin:vue/essential",
                "@vue/standard"
            ],
                "rules": {//规则配置写在这里
                "indent": [1, 4]
            },
            "parserOptions": {
                "parser": "babel-eslint"
    //此项是用来指定eslint解析器的，解析器必须符合规则，babel - eslint解析器是对babel解析器的包装使其与ESLint解析
            }
        },

找到 “@vue/prettier” 就可以了 ，注释掉就可以了

**2****）或者vue.config.js中将以下三项设置为false**

devServer: {
            overlay: {
                warnings: false,
                errors: false
            },
            lintOnSave: false
        }

# （8）模块化 #

## 1.定义 ##

模块通常是指编程语言所提供的代码组织机制，利用此机制可将程序拆解为独立且通用的代码单元。所谓模块化主要是解决代码分割、作用域隔离、模块之间的依赖管理以及发布到生产环境时的自动化打包与处理等多个方面。

简单的说：模块化就是将变量和函数 放入不同的文件中；

## 2.模块的优点 ##

1.可维护性。 因为模块是独立的，一个设计良好的模块会让外面的代码对自己的依赖越少越好，这样自己就可以独立去更新和改进。

2.命名空间。 在 JavaScript 里面，如果一个变量在最顶级的函数之外声明，它就直接变成全局可用。因此，常常不小心出现命名冲突的情况。使用模块化开发来封装变量，可以避免污染全局环境。

3.重用代码。 我们有时候会喜欢从之前写过的项目中拷贝代码到新的项目，这没有问题，但是更好的方

法是，通过模块引用的方式，来避免重复的代码库。

## 3.CommonJS  AMD/CMD ##

CommonJS是一种规范，其内容有很多种，NodeJS是这种规范的实现。SeaJS是模块加载器，是用CMD

规范

AMD/CMD是从 CommonJS 讨论中诞生的，

RequireJS 遵循 AMD（异步模块定义）规范，

Sea.js 遵循 CMD （通用模块定义）规范；

规范的不同，导致了两者 API 不同。

**AMD**（提前执行：提前异步并行加载）

优点：尽早执行依赖可以尽早发现错误；

缺点：容易产生资源浪费

**CMD**（延迟执行：延迟按需加载）

优点：减少资源浪费

缺点：等待时间长、出错时间延后

扩展：

RequireJS 是一个前端的模块化管理的工具库，遵循AMD规范,通过一个函数来将所有所需要的或者说所

依赖的模块实现装载进来，然后返回一个新的函数（模块），我们所有的关于新模块的业务代码都在这

个函数内部操作，其内部也可无限制的使用已经加载进来的以来的模块。

**AMD****：提前引入**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 11][]

**CMD****：用到哪个模块，就会加载（减少资源浪费）**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 12][]

##  4.ES6模块(module) ##

模块Module

一个模块，就是一个对其他模块暴露自己的属性或者方法的文件。

导出Export

作为一个模块，它可以选择性地给其他模块暴露（提供）自己的属性和方法，供其他模块使用。

export （导出）

import （导入）

**下面的分割线时两个文件**

### （1）导出一个 ###

export const x = 20;
    -----------------------------------------------------------------------------------
        // 导入
        import {x} from './views/moduleE'

### （2）导出多个 ###

var name = 'amy';
        var age = 18;
        var hobby = '购物';
    export {name, age, hobby};
    -----------------------------------------------------------------------------------
        // 导入
        import {name, age, hobby} from './views/moduleA'

### （3）导出别名 ###

var name = 'amy';
        var age = 18;
        var hobby = '购物';
    export {name as v1, age as v2, hobby as v3};	//as后面的为别名
    -----------------------------------------------------------------------------------
        // 导入
        import {v1, v2, v3} from './views/moduleA';

### （4）default导出（只能导一个） ###

export default {name:'abc',hobby:'games'}	//去掉default会报错
    -----------------------------------------------------------------------------------
        // 导入
    import obj from './views/moduleD'			//obj表示多个
    ===================================================================================
        export default {name:'abc',id:1};
        var x = 100;
        var y = 1000;
    export {x as v1,y as v2}
    -----------------------------------------------------------------------------------
        // 导入
    import box,{v1, v2} from './views/moduleD'	//obj表示多个

### （5）公共数据 ###

//性别
        export const sexData = [
            {key: 'man', value: '男'},
            {key: 'woman', value: '女'}
        ];
        //用户
        export const userData = [
            {id: '1', value: 'name1'},
            {id: '2', value: 'name2'}
    ];
    -----------------------------------------------------------------------------------
        // 导入
        import {sexData, userData} from './views/moduleB'

### （6）公共函数 ###

### （7）导入图片：三种方式 ###

**1****、页面直接引入**

**2、通过import的方式     **

import img1 from '@/assets/img/2.jpg' //导入图片
    <img :src="img1" /></div>
    
        data() {
            return {
                img1
            }
    },

**3****、通过require的方式     **

<img v-for="(v,i) in items" :key="i" :src="v">
    
        data() {
            return {
                items: [require("@/assets/img/1.jpg"),
                		   require("@/assets/img/2.jpg")]
            }
    },

### （8）scoped ###

**只能在当前作用域内使用**

## 5.common.js和ES6模块区别 ##

node使用的是commonjs 在使用模块的时候是运行时同步加载的 拷贝模块中的对象

模块可以多次加载，但只会在第一次加载 之后会被缓存 引入的是缓存中的值

1.commonjs输出的，是一个值的拷贝，而es6输出的是值的引用；

2.commonjs是运行时加载，es6是编译时输出接口；

[20210716172904272.png]: /images/20221004/6890a1206bb54c29b0538866aaf209fc.png
[20210716172917530.png]: /images/20221004/72e4f3e61f014ccf9d4c29b29d1fc0ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70]: /images/20221004/e133f8db69014bacabf72cb86396af46.png
[20210716173051679.png]: /images/20221004/86bfc3e6d1e542ac95ff62951a8eb0a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221004/bf47171f9e084e3abfce235e1d8957ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 2]: /images/20221004/4b68112578f746d59aef87c9eecb7f34.png
[yarn]: https://yarn.bootcss.com/
[20210716173203171.png]: /images/20221004/f708e1bc52e24f68b043463514427c69.png
[20210716173209870.png]: /images/20221004/fd02ba1a7e364d6390267bc3526844d7.png
[20210716173211774.png]: /images/20221004/279973cdc43e4c10829240722e438cf0.png
[20210716173224964.png]: /images/20221004/68027bce101b4cefbe6f456c4d873969.png
[20210716173226801.png]: /images/20221004/6c4870ae6f55401391e3268fc0fc7989.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 3]: /images/20221004/ca8a3842b2c94b1eb5fec7df957ac5a8.png
[20210716173241215.png]: /images/20221004/f21dcb80f521444eaf8dbd6659884cdc.png
[20210716173246592.png]: /images/20221004/12172d65f36e4b0ba178342405a1af5f.png
[20210716173251887.png]: /images/20221004/441bf9838ffc4c0fab73bfe617c4627c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 4]: /images/20221004/7e2a5636a6f944beac2356daad2eb323.png
[20210716173321384.png]: https://img-blog.csdnimg.cn/20210716173321384.png
[20210716173327909.png]: /images/20221004/7040e6a62fbe475cb72c7f1e8a6112ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 5]: /images/20221004/a249370d09244ef08eb2fcf9b411e5cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 6]: /images/20221004/c83f876182d84a7595b6106c0b1c81c5.png
[20210716173441492.png]: /images/20221004/166d9b1932b34ad5892b2ce7311aaff3.png
[20210716173443197.png]: /images/20221004/6608827bb5794087a47c7eb2b5bb41f7.png
[20210716173455405.png]: /images/20221004/bb336535a13e438cb5dbd462331f9630.png
[20210716173501705.png]: /images/20221004/3751ccc513e54f099843422ec63275dd.png
[20210716173510575.png]: /images/20221004/72d6bc8932794aa8bd733b8f17c2bf0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 7]: /images/20221004/af94803d516045f2ac3de4638d5b8dc2.png
[20210716173515674.png]: /images/20221004/43d86d2019e647ea8f2afe41252fd6f0.png
[20210716173520878.png]: /images/20221004/c0368c1297c4475f8250d64ff3570bc3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 8]: /images/20221004/8d9f35460e754b31b87358e89b6b0f85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 9]: /images/20221004/154faf2c5eab4e4da52a9da4cda5d8bf.png
[20210716173537401.png]: /images/20221004/1f120804fe7644cda87cce5ab9aa388f.png
[2021071617353979.png]: /images/20221004/525391626c61462ba8c69e84f3a8eee0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 10]: /images/20221004/e184e26e566b401b8f3c6b678e9db2af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 11]: /images/20221004/6830da2c48f346fe8304823e03eccb52.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 12]: /images/20221004/826119c1263d4638ab751d2fc1a2b4b6.png