基础：Vue-cli基础知识 2020年5月28日更新

课程初衷：

前端+服务端

技术内容：

基础知识：vue全家桶基础  Koa2核心知识串讲   Nuxt.js快速入门

实战重点：登录、注册  SMTP服务  城市服务   推荐服务    搜索服务   地图服务    购物车    订单设计   组件复用设计    接口设计  数据对象模型   思维&技巧

Vue2 基础

官方网站：

vue:https://cn.vuejs.org

vue cli: https://cli.vuejs.org

vue router:https://router.vuejs.org

环境搭建

（安装vue-cli之前最好查看一下版本。使用vue -V查看到的是vue cli的版本号而不是）

1.安装nodejs，配置环境变量，本系统使用的nodejs版本是10.16.3,npm版本是6.9.0

常用的dos命令：  cd  打开文件夹 ；   md    创建新的文件夹；   dir    查看文件夹内容；   cd..  返回上一级文件夹  ctrl+c可以终止正在运行的命令；   cls  清屏

npm 和 cnpm的区别：cnpm是npm的国内镜像

-g参数：全局安装，可以在命令行下直接使用

--save或--dev 安装包信息将加入到dependencies(生产阶段的依赖)

-D或--save-dev  （这两条指令必须同时存在）安装包信息将加入到devDependencies(开发阶段的依赖)，所以开发阶段一般使用它（工作中常用）。

i是install 的缩写（注意：前面没有'-'）

在git cmd命令行中选中文本之后单击右键，可以实现拷贝，在系统自带的cmd命令行中无法选中。

可以通过npm root -g查看全局安装的文件夹位置

npm install -g vue-cli    国外服务器安装，更慢一些

cnpm install -g vue-cli   /   npm install -gd express --registry=http://registry.npm.taobao.org   这两条都可以使用淘宝镜像安装

为了避免每次安装都需要--registry参数，可以使用如下命令

npm config set registry http://registry.npm.taobao.org

这样一来使用命令npm install -g vue-cli也是使用的淘宝镜像

2.vue-cli2安装

npm install -g vue-cli

cnpm install -gd vue-cli

3.创建一个vue-cli项目

vue init webpack projectName   webpack是模板    projectName不允许使用大写字母

4.创建cli过程中部分配置内容

5.http://localhost:8080

打开工程文件：

在文件路径中键入npm run dev     启动后端node服务

vue-cli3的安装

vue-cli@3    这个是官方的脚手架 Command-Line Interface:又称命令行界面或字符用户界面

[email protected]

1  npm install -g @vue/cli

#OR

2 yarn gloval add @vue/cli

打开工程项目src-components-HelloWorld.vue

一个vue文件中的三个组成部分：template（必须要有，且template元素只能有一个子元素，不能有多个并列的子元素）    script      style

创建/打开一个工程文件

创建步骤：

1. 运行cmd，进入命令行，输入vue create xxx（其中，xxx是要创建的工程文件名）
2. 进入工程文件路径，打开命令行，输入npm run serve
3. App running at:      Local:http://localhost:8080/         Network:http://192.168.1.107:8080/

如果要打开一个已经创建的工程文件，直接从创建步骤的第二步开始即可。

vue-cli语法结构、文件结构初识

基于webpack模板创建项目的语法是：

vue init webpack proj1    //proj1指的是项目名称

eslint（语法规范检查）安装：npm install eslint dev     一般常安装在开发环境中

 

 

模板语法

文本

Message:{{msg}}

原始HTML

Using mustaches:{{rawHtml}}
Using v-html directive:
    
    

特性

表达式

{{ number+1 }} 
{{ ok ? 'YES':'NO' }} 
{{ message.split(").reverse().join(") }}

指令

我是老大
我是老二

自定义指令

应用场景：1、该功能没有复杂到需要使用组件来处理，但是单纯的表达式无法实现该功能。

修饰符

...

缩写

...
...
...
...

计算属性

基础实例

    
Original message:"{{ message }}"
    
Computed reversed message:"{{reversedMessage}}"

应用场景

具有依赖关系的数据监听

类与样式

对象语法

适合较多的class名或者动态的class

数组语法

适合较少的class名

条件&列表渲染

基础用法

if else、for的模板处理方法

分组用法

复杂模板的分组条件处理的方式

事件处理

定义&缩写

事件的定义与缩写

内联写法

事件传参和事件对象

事件修饰符

1. .stop   阻止单击事件继续传播
2. .prevent    阻止默认行为
3. .capture    
4. .self
5. .once
6. .passive

快速结合键盘事件提升效率

深入了解组件

props  组件的参数传递  数据从父组件到子组件

slot    插槽在组件抽象设计中的应用

自定义事件   父子组件的通信方式   解决数据从子组件到父组件

组件一般来说是写在一个单独的文件中，拥有template/script/style三个部分。组件中的模板template只能有一个根节点，组件中的script内部的data必须的一个函数，并且返回一个对象。

//父组件  这里省去了style的内容



//子组件   com.vue  这里也省去了style的部分

路由基础

vue-router基础      https://router.vuejs.org/zh/guide/#html

router-link传参   

User

路由的两种显示模式：

hash模式：地址栏包含#符号，#以后的不被后台获取。如果#前的内容没有发生改变，请求是不会发送到后台的，从而减少了后台服务器的访问次数。但是#经常是受限关键字。在微信支付、分享url等很多场景下，特殊字符#不能满足需求，此时必须使用history模式。

history模式：具有对url历史记录进行修改的功能，这是H5里的一个新功能。也是为了减少对服务器的访问次数，工作中普遍使用。但该模式如果页面不存在，就会报错。而hash模式不会。history需要后台配合，处理404的问题。

import Vue from 'vue'
import Router from 'vue-router'
import First from '@/components/first'
import A from '@/components/A'
import B from '@/components/B'
import A1 from '@/components/A1'
import A2 from '@/components/A2'

Vue.use(Router)

export default new Router({
  mode:'history',//这里的模式选择的是history模式
  routes: [
    {
      path: '/',
      name: 'First',
      component: First,
      children:[
        {
          path: '/a',
          component: A,
        },{
          path: '/b',
          component: B
        },{
          path:'/a1',
          component:A1
        },{
          path:'/a2',
          component:A2
        }
      ]
    } 
  ]
})

Vuex基础

官方文档  https://vuex.vuejs.org