VUE===（2）

---

前言

一、前端工程

目前来说，web业务日益复杂化和多元化，前端开发从WebPage模式为主转变为WebApp模式为主了。前端的开发工作在一些场景下被认为只是日常的一项简单工作，或只是某个项目的"附属品"，并没有被当做一个"软件"而认真对待（无论是产品负责人还是开发者）。
在模式的转变下，前端都已经不是过去的拼几个页面和搞几个jquery插件就能完成。当工程复杂就会产生许多问题，比如：
如何进行高效的多人协作？
如何保证项目的可维护性？
如何提高项目的开发质量？
如何降低项目生产的风险？

前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间，而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程。
前端工程化主流技术：
node.js + npm
cnpm
vue-cli

二、 Node.js简介与安装

1.简介

Node.js是目前非常火热的技术，但是它的诞生经历却很奇特。
众所周知，在Netscape设计出JavaScript后的短短几个月，JavaScript事实上已经是前端开发的唯一标准。 后来，微软通过IE击败了Netscape后一统桌面，结果几年时间，浏览器毫无进步。（2001年推 出的古老的IE 6到今天仍然有人在使用！） 没有竞争就没有发展。微软认为IE6浏览器已经非常完善，几乎没有可改进之处，然后解散了IE6 开发团队！
而Google却认为支持现代Web应用的新一代浏览器才刚刚起步，尤其是浏览器负责 运行JavaScript的引擎性能还可提升10倍。
先是Mozilla借助已壮烈牺牲的Netscape遗产在2002年推出了Firefox浏览器，紧接着Apple于 2003年在开源的KHTML浏览器的基础上推出了WebKit内核的Safari浏览器，不过仅限于Mac平 台。随后，Google也开始创建自家的浏览器。他们也看中了WebKit内核，于**是基于WebKit内核推出 了Chrome浏览器。**Chrome浏览器是跨Windows和Mac平台的，并且，Google认为要运行现代Web应用，浏览器必 须有一个性能非常强劲的JavaScript引擎，于是Google自己开发了一个高性能JavaScript引擎，名字叫 V8 ，以BSD许可证开源。 现代浏览器大战让微软的IE浏览器远远地落后了，因为他们解散了最有经验、战斗力最强的浏览 器团队！回过头再追赶却发现，支持HTML5的WebKit已经成为手机端的标准了，IE浏览器从此 与主流移动端设备绝缘。 浏览器大战和Node有何关系？
话说有个叫Ryan Dahl的歪果仁，他的工作是用C/C++写高性能Web服务。对于高性能，异步IO、事件驱动是基本原则，但是用C/C++写就太痛苦了。于是这位仁兄开始设想用高级语言开发Web服务。他评估了很多种高级语言，发现很多语言虽然同时提供了同步IO和异步IO，但是开发 人员一旦用了同步IO，他们就再也懒得写异步IO了，所以，最终，Ryan瞄向了JavaScript。
因为JavaScript是单线程执行，根本不能进行同步IO操作，所以，JavaScript的这一“缺陷”导致了它只能使用异步IO。 选定了开发语言，还要有运行时引擎。这位仁兄曾考虑过自己写一个，不过明智地放弃了，因为V8就是开源的JavaScript引擎。让Google投资去优化V8，咱只负责改造一下拿来用，还不用付 钱，这个买卖很划算。 于是在2009年，Ryan正式推出了基于JavaScript语言和V8引擎的开源Web服务器项目，命名为 Node.js。虽然名字很土，但是，Node第一次把JavaScript带入到后端服务器开发，加上世界上 已经有无数的JavaScript开发人员，所以Node一下子就火了起来。

2.Node.js有什么用

Node.js 是一个开源和跨平台的 JavaScript 运行时环境。 它几乎是任何类型项目的流行工具！
Node.js 在浏览器之外运行 V8 JavaScript 引擎（Google Chrome 的内核）。 这使得 Node.js 的性能非常好。

3.安装node.js

下载成功后选择安装位置 直接 一直下一步就行
安装完成后在cmd 命令窗口 node -v 查看版本号 是否安装成功

三、npm和cnpm简介和使用

下载管理资源文件的东西 性质有点类似Maven

1.npm简介和安装：

npm其实是Node.js的包管理工具（package manager）。 为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的 JavaScript代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代 码，解压，再使用，非常繁琐。
于是一个集中管理的工具应运而生：大家都把自己开发的模块打 包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该 从哪下载。 更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y， npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。
否则，靠我们自己手动管理， 肯定既麻烦又容易出错。 npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件 注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个 包（package） （即，代码模 块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依 赖项和版本。 由于新版的nodejs已经集成了npm，
所以npm也一并安装好了

2.cnpm简介和安装

淘宝团队做的国内镜像，因为npm的服务器位于国外，国内访问速度很慢，经常因为超时导致失 败。
淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
安装：

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

查看安装版本： cnpm -v
用等好一会安装

四、 vue-cli简介与安装

1.简介

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 工程化项目

2.安装

3.0以下(2.9.6)

cnpm install -g vue-cli@版本号

3.0 以上

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

我们使用4以上版本：

cnpm安装： cnpm install -g @vue/[email protected]

npm 安装：npm install -g @vue/cli

测试是否安装成功：
vue -V 或者 vue --version

2.vue-cli项目创建

vue-cli 3.0之前 （2.9.6） ’
vue init webpack 项目名称

vue-cli 3.0之后 （4.1.1）
vue create 项目名称

3.具体步骤

1. 创建命令
   选择文件夹位置直接cmd 进入创建
   vue create web_front_demo1_20211209
   

2. 选择手动
   蓝色的
   

3. 选择组件

选择这三个够基础了

组件作用：
choose vue version vue版本选择
babel 转码器 可以把es6的转换为浏览器能识别的es5
TypeScript 使用ts文件编写
wep app support web支持
router 是否要路由
vuex vue扩展是否要
css css解析器
linter 规则校验 ，建议新手不要要，会提示写错
unit 单元测试（前端没有专门的单元测试人员）
e2e 点到点测试

4. 选择路由
   是否使用history路由器没事 hash模式 （后面会带 # ） 选择n
   
5. 选择配置文件存放位置
   选择 in package.json
   
6. 选择以后的项目创建模式
   以后创建项目是否按照预先设定创建，如果Y，以后每次都会使用前面设置
   
7. 等待完成
   
8. 成功

五、使用vscode 简介安装基本使用

官方介绍

1.简介

Visual Studio Code 是一款轻量级但功能强大的源代码编辑器，可在您的桌面上运行，适用于 Windows、macOS 和 Linux。它内置了对 JavaScript、TypeScript 和 Node.js 的支持，并为其他语言（例如 C++、C#、Java、Python、PHP、Go）和运行时（例如 .NET 和 Unity）提供了丰富的扩展生态系统. 通过这些介绍性视频开始您的 VS Code 之旅。

2.下载

图形化基本安装 不在介绍

3.推荐插件

汉化包： Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
语法高亮： Prettier - Code formatter

六、启动和访问

1.打开项目

1. 打开vscode
2. 选择打开文件夹
   
3. 选择刚才创建的项目

4. 启动项目
打开终端

5. 启动成功

七、项目目录介绍

添加
vue.config.js:保存vue配置的文件，能够用于设置代理,打包配置等html
新加全局配置：vue.config.js 配置访问IP地址，浏览器自动打开，端口号，跨域等等。。。
module.exports={
devServer:{
port:8080,
host:‘localhost’,
open:true //配置浏览器自动打开
}}启动

八、单文件组件介绍和使用

单文件组件由来：
在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：

• 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
• 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
• 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
• 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如Babel
• 文件扩展名为 .vue 的 single-file components(单文件组件) 为解决上述问题提供了方法

单文件组件定义

<template>
    <div class="cla">
          
    </div>
</template>
<script>
 
export default {
    props: {//注册属性 父传子 数据传递
    },
    data() {
        return{};//定义数据
    },
    created(){//created在模板渲染成html前调用，通常在这里初始化某些属性，然后再渲染视图
    },
    methods: {//方法事件处理
       
    },
    components: {//组件注册
     
    },
};
</script>
<style>
    .cla{
        color:red;
    }
</style>

单文件特点

• 完整语法高亮
• 模块化处理

template中书写HTML结构
script中书写组件的配置项
style中书写组件的样式

• 组件作用域的 CSS 【scoped 表明这里写的css 样式只适用于该组件，可以限定样式的作用域】

单文件组件中script 标签理解

• 不使用.vue 单文件时，我们是通过 Vue 构造函数创建一个 Vue 根实例来启动vue 项目
• 在.vue文件中，export default 后面的对象就相当于 new Vue() 构造函数中的接受的对象
• 需要注意data 的书写方式不同，在 .vue 组件中data 必须是一个函数，它return返回一个对象，这个返回的对象的数据，供组件实现

小实例

1. 在page里面创建一个vue文件

<template>
    <div class="cla">
          <p>{{msg}}</p>
          <button @click="zhangMsg">反转</button>
          <HelloWorld msg="发送到发的说法是"></HelloWorld>
    </div>
</template>
<script>
 import HelloWorld from '@/components/HelloWorld.vue'
export default {
    props: {//注册属性 父传子 数据传递

    },
    data() {
        return{
            msg:'hello qy141!!!'
        };//定义数据
    },
    created(){//created在模板渲染成html前调用，通常在这里初始化某些属性，然后再渲染视图
    },
    methods: {//方法事件处理
       zhangMsg:function(){
          this.msg=this.msg.split('').reverse().join('');
          } 
    },
    components: {//组件注册 使用Helloword
     HelloWorld
    },
};
</script>
<style>
    .cla{
        color:red;
    }
</style>

2. 打开router文件下的index.js
   
3. 打开app。vue