Vue工程化管理

基本vue介绍

vue的介绍：https://learning.dcloud.io/#/?vid=0
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue.js是一个Js库。
官网：http://cn.vuejs.org
手册：http://cn.vuejs.org/api/
文档：https://cn.vuejs.org/v2/guide/
当前最新版本：V2.6.10

vue的特点
特点：小巧
特点：简单、易学
适合: 移动端项目,小巧
注意：不兼容低版本IE(8以下)

前端工程化管理

前端工程化是使用软件工程的技术和方法来进行前端项目的开发、维护和管理
前端工程化使开发更高效，项目更规范。

1.前端工程化

代码规范:
保证团队所有成员以同样的规范开发代码。
分支管理:
不同的开发人员开发不同的功能或组件，按照统一的流程合并到主干。
模块管理:
团队引用的模块应该是规范的
保证这些模块可以正确的加入到最终编译好的包文件中。
自动化测试：
为了保证和并进主干的代码达到质量标准，必须有测试，而且测试应该是自动化的，可以回
归的。
构建：
主干更新以后，自动将代码编译为最终的目标格式，并且准备好各种静态资源，
部署。
将构建好的代码部署到生产环境。

2. vue项目工程化管理方案

webpack
vue-cli

3. webpack介绍

WebPack可以看做是模块打包机：它做的事情是分析你的项目结构，找到JavaScript模块以及其它的一
些浏览器不能直接运行的拓展语言（Scss，TypeScript，vue等），并将其打包为合适的格式以供浏览
器使用。

关于webpack的一些思考
https://refined-x.com/2017/06/16/Webpack%E6%98%AF%E7%AD%94%E6%A1%88%E5%90%
97/
官网：
英文文档：https://webpack.js.org/concepts/
中文文档：https://www.webpackjs.com/concepts/
版本：
当前最新版本：v4.41.2

包管理工具

工具介绍

vue推荐开发环境
vue-cli: 用户生成Vue工程模板。
Node.js: javascript运行环境(runtime)，不同系统直接运行各种编程语言。使用vue-cli 脚手架搭
建项目的时候需要nodejs
npm: Nodejs下的包管理器。
webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的
准备，比如资源的合并和打包。
工具包之间的关系
webpack能够把.vue后缀名的文件打包成浏览器能够识别的s，而这个.vue文件装换需要打包器vue-
loader，这个vue-loader打包器是可以从npm上面下载（npm上面有很多资源包），npm下载文件之
后，webpack打包文件的时需要node环境去运行

工具安装

安装 node.js
从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。
安装完成之后，打开命令行工具，输入 node -v ，如果出现相应的版本号，则说明安装成功。
node.js 安装时，会一并安装上npm包管理器
安装 cnpm ：如果觉得npm太慢，可以考虑国内的cnpm
在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等
待。
完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝
npm镜像官网。

工具的使用

官方文档：https://www.npmjs.cn/
其他文档：https://www.runoob.com/nodejs/nodejs-npm.html
cnpm: https://npm.taobao.org/
常用命令

# 当前项目安装（安装到当前目录）
npm install express 
# 全局安装
npm install express -g 
# 查看安装信息
npm list
# 查看某个模块的版本号
npm view grunt
# 卸载模块
npm uninstall express
# 更新模块
npm update express
# 搜索模块
npm search express

cnpm 支持 npm 除了 publish 之外的所有命令

Vue实例

Vue的简单使用

vue的部署：https://learning.dcloud.io/#/?vid=1
vue应用：https://learning.dcloud.io/#/?vid=2
官方文档：https://cn.vuejs.org/v2/guide/installation.html

方法一：引用script
下载vue代码或引用在线vue.js
1.vue的使用.html
方法二：使用工具脚手架搭建
较复杂，后面学习

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <!-- 加载好vue.js后，会加载一个Vue对象 -->
 </head>
 <body>
 <div id="app">
  <p>{{message}}</p>
 </div>
   <script>
   var data = {message: "Hello Vue!"};
     var app = new Vue({
      el: '#app',
      data: data
     })
     // app => 实例化一个Vue实例名叫
     // el  => 元素
     // data => 数据的值，需要是一个Ojbect(python中的字典类型)
   </script>
 </body>
</html>

vue的数据与方法

1). Vue数据的响应式
视频：https://learning.dcloud.io/#/?vid=3
官方文档：https://cn.vuejs.org/v2/guide/instance.html#%E5%88%9B%E5%BB%BA%E4%B8%
80%E4%B8%AA-Vue-%E5%AE%9E%E4%BE%8B

1.vue的使用.html

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <!-- 加载好vue.js后，会加载一个Vue对象 -->
 </head>
 <body>
 <div id="app">
  <h1>1. 响应式数据</h1>
<!-- “Mustache”语法 -->
  <p>1. {{message }}</p>
<p>2. {{message2 }}</p>
 </div>
   <script>
   var data = {message: "hello vue!"};
     var app = new Vue({
      el: '#app',
      data: data
     })
     // app => 实例化一个Vue实例名叫
     // el  => 元素
     // data => 数据的值，需要是一个Ojbect(python中的字典类型)
// 1. 响应式数据
data.message = "hello vue!";
app.message = "hello vue!";
app.message2 = "Vue2";
   </script>
 </body>
</html>

只有当实例被创建时中存在的属性才是响应式的。
如果使用 app.message2=“hello Vue2” ，此时的message2是非响应式的

2). 实例生命周期
视频： https://learning.dcloud.io/#/?vid=4
文档：https://cn.vuejs.org/v2/guide/instance.html#%E5%AE%9E%E4%BE%8B%E7%94%9F%
E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
vue的生命周期.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
},
//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置
之前被调用。
beforeCreate:function(){
console.log('beforeCreate');
},
/* 在实例创建完成后被立即调用。
在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运
算，watch/event 事件回调。
然而，挂载阶段还没开始，$el 属性目前不可见。 */
created :function(){
console.log('created');
},
//在挂载开始之前被调用：相关的渲染函数首次被调用
beforeMount : function(){
console.log('beforeMount');
},
//el 被新创建的 vm.$el 替换, 挂在成功
mounted : function(){
console.log('mounted');
},
//数据更新时调用
beforeUpdate : function(){
console.log('beforeUpdate');
},
//组件 DOM 已经更新, 组件更新完毕
updated : function(){
console.log('updated');
}
});
setTimeout(function(){
vm.msg = "change ......";
}, 3000);
</script>
</body>
</html>

vue-cli3+webpack管理项目

vue-cli3的安装与创建

官方文档：https://cli.vuejs.org/zh/guide/installation.html

1). 如果安装有vue-cli 2.0 1.0 先卸载

npm uninstall vue-cli -g

2). 安装vue-cli3

npm install -g @vue/cli

3). 查看是否安装成功vue-cli3

vue --version

显示安装成功了, 版本号已经是3.2.1

vue-cli3创建项目

官方文档： https://cli.vuejs.org/zh/guide/creating-a-project.html

# 方法一：创建项目并运行项目
vue create vuecli3-porj
"""
Please pick a preset: default (babel, eslint)
"""
cd vuecli3-porj
# 启动项目
npm run serve
# 方法二：使用图形化方式创建项目（打开一个web控制台）
vue ui

一些概念

js版本：ECMAScript 是javascript语言的官方名称。https://www.w3school.com.cn/js/js_versions.asp
babel: Babel 是一个 JavaScript 编译器
主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的
JavaScript 代码
https://babel.docschina.org/docs/en/
eslint: SLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保
证代码的一致性和避免错误。（风格和语法配置检查工具）
http://eslint.cn/docs/user-guide/getting-started

vue-cli3的使用

vue-cli3+webpack目录结构

项目运行与配置

入口配置文件： package.json
这是一个入口配置文件，配置内容包含以下部分：

项目基本信息：name, version, description, author, private 这些都是项目的基础信息，
分别对应 vue create XXXX 所填写的信息
启动方式：scripts
- 这个就比较重要了。作用主要就是把 webpack 的原生命令代理一下（因为需要配
  置很多参数，可能会很长，不便于阅读），就像封装函数一样，变得简洁一点，
  提高可读性，也便于人的思维去理解。
- 当我们运行：npm run xxx时，会执行xxx这个key对应的命令
项目依赖：dependencies、devDenpencies
基本配置规则：eslintConfig、postcss…
默认配置：

{
"name": "vuecli3-porj",
"version": "0.1.0",
"private": true,
"scripts": {
 "serve": "vue-cli-service serve",
 "build": "vue-cli-service build",
 "lint": "vue-cli-service lint"
},
"dependencies": {
 "core-js": "^2.6.5",
 "vue": "^2.6.10"
},
"devDependencies": {
 "@vue/cli-plugin-babel": "^3.11.0",
 "@vue/cli-plugin-eslint": "^3.11.0",
 "@vue/cli-service": "^3.11.0",
 "babel-eslint": "^10.0.1",
 "eslint": "^5.16.0",
 "eslint-plugin-vue": "^5.0.0",
 "vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
 "root": true,
 "env": {
  "node": true
 },
 "extends": [
  "plugin:vue/essential",
  "eslint:recommended"
 ],
 "rules": {},
 "parserOptions": {
  "parser": "babel-eslint"
 }
全局cli配置： vue.config.js
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中
存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json
中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
配置文件详细配置方式：https://cli.vuejs.org/zh/config/#vue-config-js
示例：
},
"postcss": {
 "plugins": {
  "autoprefixer": {}
 }
},
"browserslist": [
 "> 1%",
 "last 2 versions"
]
}

全局cli配置： vue.config.js
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中
存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json
中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
配置文件详细配置方式：https://cli.vuejs.org/zh/config/#vue-config-js
示例：

module.exports = {
pages: {
index: {
// page 的入口
entry: 'src/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%=
htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时，
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话，就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
// subpage: 'src/subpage/main.js'
},
baseUrl: process.env.NODE_ENV === 'production' ? './' : '/',
devServer: {
port: 8383, // 端口号
host: 'localhost',
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
// 配置一个后端数据接口(代理) -> 已处理跨域
// proxy: 'http://localhost:4000'
// 配置多个后端数据接口(代理) -> 已处理跨域
proxy: {
'/api': {
target: 'http://localhost:5000/',
vuecli插件与预设：https://cli.vuejs.org/zh/guide/plugins-and-presets.html
注意，以上配置都可参考webpack配置：https://www.webpackjs.com/concepts/
3). npm run serve的运行过程
vue-cli3会到项目的根目录下寻找一个叫：package.json 的文件
在package.json文件中，配置了serve对应的执行指令vue-cli-service serve, 此时会调用工具运
行
项目会加载main.js，并运行项目
main.js加载的配置在@vue/cli-service这个开发环境依赖包中，如下：
node_modules -> @vue -> cli-service -> lib -> config -> base.js
扩展学习：
vue-cli系列之vue-cli-service整体架构浅析
vue-cli2: npm run dev启动过程
vue-cli2: npm run dev启动过程
Vue CLI 3是如何加载main.js
在Vue-cli中使用bootstrap：https://www.bbsmax.com/A/n2d9MVkvdD/
4. vue-cli2与vue-cli3的区别
Vue-Cli 是一个基于 Vue.js 进行快速开发的完整系统
由于webpack配置比较复杂，vue-cli3相较于原来的vue-cli2在配置上做了大量的简化。
如果当前使用的是vue-cli2，想升级到vue-cli3，vue-cli3也是兼容了vue-cli2的配置方式。
ws: true,
changeOrigin: true
},
'/foo': {
target: 'http://localhost:5001/'
}
}, 
}
}

vuecli插件与预设：https://cli.vuejs.org/zh/guide/plugins-and-presets.html
注意，以上配置都可参考webpack配置：https://www.webpackjs.com/concepts/

npm run serve的运行过程

vue-cli3会到项目的根目录下寻找一个叫：package.json 的文件
在package.json文件中，配置了serve对应的执行指令vue-cli-service serve, 此时会调用工具运
行
项目会加载main.js，并运行项目
main.js加载的配置在@vue/cli-service这个开发环境依赖包中，如下：
node_modules -> @vue -> cli-service -> lib -> config -> base.js

webpackConfig
  .mode('development')
  .context(api.service.context)
  .entry('app')
   .add('./src/main.js')  # 在这里
   .end()
  .output
   .path(api.resolve(options.outputDir))
   .filename(isLegacyBundle ? '[name]-legacy.js' :
'[name].js')
   .publicPath(options.publicPath)

扩展学习：
vue-cli系列之vue-cli-service整体架构浅析
vue-cli2: npm run dev启动过程
vue-cli2: npm run dev启动过程
Vue CLI 3是如何加载main.js
在Vue-cli中使用bootstrap：https://www.bbsmax.com/A/n2d9MVkvdD/

vue-cli2与vue-cli3的区别

Vue-Cli 是一个基于 Vue.js 进行快速开发的完整系统
由于webpack配置比较复杂，vue-cli3相较于原来的vue-cli2在配置上做了大量的简化。
如果当前使用的是vue-cli2，想升级到vue-cli3，vue-cli3也是兼容了vue-cli2的配置方式。

简单来看一下区别：

1). 查看版本
vue -V 查看本地 vue 版本
2). 创建项目
vue-cli3.0：vue create 进入工程文件夹，创建项目。
vue-cli2.0：vue init webpack
3). 启动项目
记得先安装依赖：npm install

vue-cli3.0启动：npm run serve
vue-cli2.0启动：npm run dev

目录结构

其他资料

webpack配置:
http://vuejs-templates.github.io/webpack/structure.html

Vue工程化管理

文章目录

基本vue介绍

前端工程化管理

1.前端工程化

2. vue项目工程化管理方案

3. webpack介绍

包管理工具

工具介绍

工具安装

工具的使用

Vue实例

Vue的简单使用

vue的数据与方法

vue-cli3+webpack管理项目

vue-cli3的安装与创建

vue-cli3创建项目

vue-cli3的使用

vue-cli3+webpack目录结构

项目运行与配置

npm run serve的运行过程

vue-cli2与vue-cli3的区别

目录结构

其他资料

使用c#强大的表达式树实现对象的深克隆之解决循环引用的问题

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU启动那些事（12.A）- uSDHC eMMC启动时间(RT1170)

本地SSL证书过期输入命令在IIS自动生成

python 用socket搭建socket服務器-多線程網絡編程

mysql優化器

python進程,線程,協程

HTTP over SSL/TLS

史上最易部署lvs集羣-tun模式

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結