Vue学习记录

启动项目

1. 修改项目配置文件

   {
     "name": "jhzxxmgl_man",																//项目名称
     "version": "0.1.0",																		//项目版本
     "private": true,														
     "scripts": {																					//npm run serve 要运行的脚本
       "serve": "vue-cli-service serve --port 8102",		//serve脚本通过--port修改端口号
       "build": "vue-cli-service build",
       "lint": "vue-cli-service lint"
     },
     "dependencies": {																			//项目依赖
       "core-js": "^3.3.2",
       "vue": "^2.6.10",
       "vue-class-component": "^7.0.2",
       "vue-property-decorator": "^8.3.0",
       "vue-router": "^3.1.3",
       "vuex": "^3.0.1"
     },
     "devDependencies": {																	//开发依赖
       "@vue/cli-plugin-babel": "^4.0.0",
       "@vue/cli-plugin-eslint": "^4.0.0",
       "@vue/cli-plugin-typescript": "^4.0.0",
       "@vue/cli-service": "^4.0.0",
       "@vue/eslint-config-prettier": "^5.0.0",
       "@vue/eslint-config-typescript": "^4.0.0",
       "eslint": "^5.16.0",
       "eslint-plugin-prettier": "^3.1.1",
       "eslint-plugin-vue": "^5.0.0",
       "prettier": "^1.18.2",
       "sass": "^1.19.0",
       "sass-loader": "^8.0.0",
       "typescript": "~3.5.3",
       "vue-template-compiler": "^2.6.10"
     }
   }

2. 进入项目目录，启动服务

cd <Project-Name>
npm run serve

在浏览器中输入localhost:port, 其中port为上方配置文件的内的端口，就可以访问vue的框架demo了

项目目录

.
├── README.md																				项目介绍
├── babel.config.js																	babel配置文件	
├── node_modules																		依赖
├── package-lock.json
├── package.json																		依赖配置
├── postcss.config.js
├── public																					公共文件
│   ├── favicon.ico
│   └── index.html
├── src																							源码
│   ├── App.vue																			页面主入口
│   ├── assets																			项目中需要用到的资源文件，css、js、images
│   ├── components																	公共组件：header.vue、footer.vue等	
│   ├── main.ts																			vue-cli工程的入口文件
│   ├── router																			vue路由的配置文件
│   ├── shims-tsx.d.ts
│   ├── shims-vue.d.ts
│   ├── store																				全局数据
│   └── views																				图像层
└── tsconfig.json																		TypeScript配置

Store全局变量

​ 在使用vue-cli初始化项目时选择了Vuex，在项目目录中在src下出现一个store的文件夹，里面会存放一个index.ts的文件

Vuex

API

Components

• template标签内只能有一个根节点

Webpack

模块化演进

Script标签

<script scr="module1.js"></script>
<script scr="module2.js"></script>
<script scr="module3.js"></script>
<script scr="module4.js"></script>

• 全局作用域下容易造成变量冲突
• 文件只能按照<script>的书写顺序进行加载
• 开发人员必须主管解决模块和代码库的依赖关系
• 在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪

CommonJS

服务器遵从CommonJS规范，该规范核心思想是允许模块通过require方法来同步加载所需依赖的其他模块，然后通过exports活module.exports来导出需要暴露的接口

require("module");
require("../module.js");
export.doStuff = function() {}
module.exports = someValue;

优点：

• 服务器端模块便于启用
• NPM中已经有超过45万个可以使用的模块包
• 简单易用

缺点：

• 同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源师异步加载的
• 不能非阻塞的并行加载多个模块

实现：

• 服务端的NodeJS
• Browserify, 浏览器短的CommonJS实现，可以使用NPM的模块，但是编译打包后的文件体积较大
• modules-webmake, 类似Browserify，但不如Browserify灵活
• wreq，Browserify的前身

AMD

Asynchronnous Module Definition 规范其实主要的接口define(id?, dependencies?, factory); 它要在声明模块的时候指定所有的依赖dependencies, 并且还要当做形参传到factory中，对于以来的模块提前执行

define("module", ["dep1", "dep2"], function(d1,d2) {
	return someExporteValue;
});
require(["module", "../file.js"], function(module, file) {});

优点：

• 适合在浏览器环境中异步加载模块
• 可以并行加载多个模块

缺点：

• 提高了开发成本，代码的于都和书写比较困难，模块定义方式的语义不畅
• 不符合通用的模块化思维方式，是一种妥协的体现

实现：

• [RequireJS][https://requirejs.org/]
• [curl][https://curl.haxx.se/]

CMD

Commons Module Definition 规范和AMD很相似，尽量保持简单，并与CommonJS和NodeJS的Modules规范保持了很大的兼容性.

define(function(require, exports, module) {
	var $ = require("jquery");
	var Spinning = require("./spinning");
	exports.doSomething = ...;
	module.exports = ..;
});

优点：

• 依赖就近，延迟执行
• 可以很容易在NodeJS中运行

缺点：

• 依赖SPM打包，模块的加载逻辑偏重

实现:

• Sea.js
• coolie

ES6模块

EcmaScript6 标准增加了JavaScript语言层面的模块体系定义。ES6模块的设计思想，是尽量静态化，使编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。

import "jquery";
export function doStuff() {}
module "localModule" {}

优点：

• 容易进行静态分析
• 面向未来的EcmaScript标准

缺点：

• 原生浏览器端还没有实现该标准
• 全新的命令，新版的NodeJS才支持

实现：

• [Babel][https://www.babeljs.cn/]

安装Webpack

WebPack是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用

安装：

npm instal webpack -g	#全局安装
npm install webpack-cli -g 

测试：

• webpack -v
• webpack-cli -v

配置Webpack

创建`webpack.config.js`配置文件

• entry: 入口文件，指定WebPack用哪个文件作为项目的入口
• output: 输出，指定WebPack把处理完成的文件放置到指定路径
• module: 模块，用于处理各种类型的文件
• plugins: 插件，如：热更新、代码重用等
• resolve: 设置路径指向
• watch: 监听，用于设置文件改动后直接打包

使用Webpack

1. 创建项目

2. 创建一个名为modules的目录，用于放置JS模块等资源文件

3. 在modules下创建模块文件，如hello.js，用于编写JS模块相关代码

   exports.sayHi = function() {
   	document.write("<div>Hello Webpack！</div>");
   }

4. 在modules下创建一个名为main.js的入口文件，用于打包是设置entry属性

   var hello = require("./hello");
   hello.sayHi();

5. 在项目目录下创建webpack.config.js配置文件，使用webpack命令打包

   module.exports = {
   	entry: "./modules/main.js",
   	output: {
   		filename: "./js/bundle.js"
   	}
   }

Vue-router

​ Vue Router是Vue官方，它和Vue.js的核心深度集成，让构建单页面变得易如反掌。包含的功能：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于Vue.js过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的CSS class的链接
• HTML5历史模式或hash模式，在IE9中自动降级
• 自定义的滚动条行为

安装

​ 基于第一个vue-cli进行测试学习，先查看node_modules中是否存在vue-router

​ vue-router是一个插件包，所以我们还是需要用npm/cnpm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save-dev

​ 如果在一个模块化工程中使用它，必须要通过Vue.use()明确地安装路由功能：

import Vue from 'vue'
import VurRouter from 'vue-router'

Vue.use(VueRouter); 	#显示声明

测试

1. 先删除没有用的东西

2. components目录下存放我们自己编写的组件

3. 定义一个Content.vue的组件

   <template>
   	<div>
           <h1>内容页</h1>
       </div>
   </template>
   <script>
   	export default {
           name: "Content"
       }
   </script>

4. 安装路由，在src目录下，新建一个文件夹： router,专门存放路由

   import Vue from 'vue'
   import Router from 'vue-router'
   import Content from '../components/Content'
   import main from '../components/main'
   
   // 安装路由
   Vue.use(Router)
   
   // 配置导出路由
   export default new Router({
     routes: [
       {
         // 路由路径
         path: '/content',
         name: 'Content',
         // 路由跳转组件
         component: Content
       }, {
         // 路由路径
         path: '/main',
         name: 'main',
         // 路由跳转组件
         component: main
       }
     ]
   })

5. 在main.js中配置路由

   import Vue from 'vue'
   import App from './App'
   // 自动扫描router下的index文件，Vue-router在index.js中已经显示声明
   import router from './router' 
   
   Vue.config.productionTip = false
   
   new Vue({
     el: '#app',
     // 配置路由
     router,
     components: { App },
     template: '<App/>'
   })

6. 在App.vue中使用路由

   <template>
     <div id="app">
       <h1>Vue-Router</h1>
       <router-link to="/main">首页</router-link>
       <router-link to="/content">内容页</router-link>
       <router-view/>
     </div>
   </template>
   
   <script>
   export default {
     name: 'App'
   }
   </script>
   
   <style>
   #app {
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
   }
   </style>

   路由嵌套

​ 嵌套路由又称为子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，URL中各段动态路径也按照某种结构对应嵌套的各层组件，例如:

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

学习链接：https://www.bilibili.com/video/BV18E411a7mC