vue模块化开发

最新推荐文章于 2024-07-21 19:21:16 发布

至尊绝伦

最新推荐文章于 2024-07-21 19:21:16 发布

阅读量4.4k

点赞数 4

分类专栏：笔记文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/m0_51636525/article/details/121125122

版权

本文详细介绍了Vue.js的模块化开发，包括CommonJS和ES模块化，重点讲解了Vue CLI脚手架的使用，如Vue CLI2与Vue CLI3的区别，以及Vue Router的配置与功能，如路由懒加载、动态路由、嵌套路由和导航守卫。同时，还探讨了Promise在异步编程中的应用以及Vuex状态管理，包括store、getters、mutations和actions的使用。

摘要由CSDN通过智能技术生成

1.前端代码化雏形和CommonJS

JavaScript原始功能

在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或者动画实现，代码量比较少，只要写在script标签里面就可以了

随着ajax异步请求的出现，慢慢形成了前后端分离，客户端需要完成的事情越来越多，代码量也越来越多。为了应对代码量的剧增，我们通常会把代码组织在多个js文件中，进行维护

但会出现一些问题：比如全局变量同名的问题

使用函数闭包可以解决变量冲突的问题，但是使用不了其他文件定义的变量

模块化有两个核心：导出和导入

CommonJS的导出

module.exports = {
    flag:true,
    test(a, b){
       return a + b
    },
    demo(a, b){
        return a + b
    }
}

CommonJS的导入

let { test , demo } = required('module')

2.ES模块化的导入和导出

关键字export（导出） import（导入）

导出export

//aaa.js

let name ='jjj'
let age = 18
let height = 1.22
function sum(sum1,sum2){
        return sum1+sum2
    }

//导出方式一
export {name,age,height,sum} 

//导出方式二
export var num1 = 1000
//在定义的时候直接导出

//导出函数/类
export function mul(num1,num2){
    return num1 + num2
}

某些情况下，一个模块中包含某个功能，我们并不希望给这个功能命名，要让导入者来自己命名

就可以使用export default

只能默认导出一个，而且其他文件导入的时候可以自定义名称，不需要用{}括起来

const address = 'ss'
export default address
//只能默认一个

import jjj from "./aaa.js"
//可以自己命名，不要加{}

导入 import

//mmm.js

import { flag, sum } from "./aaa.js"

//统一全部导入
import * from "./aaa.js"
console.log(aaa.flag);

2021.11.4

2.webpack

从本质来讲，webpack是一个现代的js应用的静态模块打包工具

webpack让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系

2.1.webpack的安装

webpack依赖node环境，node的工具npm( Node Packages Manager )

3.Vue CLI脚手架

开发大型项目的时候才需要使用Vue CLI，Vue.js需要考虑代码目录结构，项目结构和部署，热加载，代码单元测试等事情，脚手架工具会帮助我们完成这些事情

CLI是command-Line-Interface，命令行界面，vue-cli可以快速搭建Vue开发环境以及对应的webpack配置

3.1.安装脚手架

npm install -g @vue/cli

安装脚手架不成功的话

使用指令

npm clean cache -force

打开终端的时候使用管理员身份执行

如果仍然需要使用旧版本的vue init 功能，可以全局安装一个桥接工具

npm install -g @vue/cli-init

3.2.脚手架CLI2初始化项目指令

//cli2
vue init webpack 项目名称

vue cli2

每个指令的作用

3.3.runtime-compiler和runtime-only的区别

只有main.js有区别

//runtime-compiler
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

//runtime-only
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h = > h(App)
})