启动项目

修改项目配置文件

{
  "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"
  }
}

1 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模块，都只能在运行时确定这些东西。

1
2
3

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

优点：

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

缺点：

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

实现：

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

安装Webpack

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

安装：

1 2	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

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

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

1
2
3

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

在modules下创建一个名为main.js的入口文件，用于打包是设置entry属性
1
2
var hello = require("./hello");
hello.sayHi();

在项目目录下创建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来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

1	npm install vue-router --save-dev

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

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

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

测试

先删除没有用的东西
components目录下存放我们自己编写的组件

定义一个Content.vue的组件

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

安装路由，在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
    }
  ]
})

在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/>'
})

在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