Vue高阶

Vue.cli是基于vue应用开发提供的一个脚手架工具，为应用搭建基础的框架架构，提供插件、开发服务、打包等功能。

1. 安装

node.js是一个JavaScript的运行环境，提供了一个事件驱动、非阻塞I/O的模型，让JavaScript运行在服务端

npm全称Node Package Manager，是node包管理和分发的工具，可以对应用的依赖进行管理，下载js库，打包js文件

npm从远程下载的js包所存放的路径会变得越来愈大，使用 npm config ls 查询NPM管理包路径（NPM下载的依赖包所存放的路径），默认存在C盘

2. 创建vuecli项目

• vue create 文件名（用短横线连接）
• 选择自定义脚手架模式，勾选babel，route组件
• 选择hash模式，选择项目配置文件单独存放并保存模板
• 进入项目目录 cd
• 启动项目 npm run serve
• 导入项目到vscode中查看项目结构

　　

|--- my-project 项目名称
|--- node_modules 存放依赖包的目录
|--- public 静态资源管理目录
|--- src 组件源码目录(我们写的代码)
|--- assets 存放静态图片资源(CSS也可以放在这里)
|--- components 存放各种组件(一个页面可以看做一个组件)，各个组件联系在一起组成一个
完整的项目
|--- router 存放了项目路由文件
|--- views 放置的为公共组件(主要还是各个主要页面)
|--- App.vue app.vue可以当做是网站首页，是一个vue项目的主组件，页面入口文件
|--- main.js 打包运行的入口文件，引入了vue模块和app.vue组件以及路由route
|--- babel.config.js babel配置文件, 对源代码进行转码(把es6=>es5)
|--- package.json 项目及工具的依赖配置文件
|--- paxkage-lock.json 依赖配置文件

3. package.json

{
    // 项目基本信息
    "name": "my-project",
    "version": "0.1.0",
    "private": true,
    // 运行项目的命令
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build"
    },
    // 生产环境需要的依赖
    "dependencies": {
        "core-js": "^3.6.5",
        "vue": "^3.0.0",
        "vue-router": "^4.0.0-0"
    },
    // 本地环境开发需要的依赖
    "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-router": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "@vue/compiler-sfc": "^3.0.0"
    }
}

 // 自定义配置
    "vue":{
      "devServer":{
        "port":"8088",
        "open":true

      }
    }

4. vue 组件化开发

• 常用的组件
  • 页面级别的组件通常是 views 目录下的.vue组件，是组成整个项目的各个主要页面
  • 业务上可复用的基础组件，通常是在业务中被各个页面复用的组件，写到 components 目录下，然后通过import在各个页面中使用

组件构成

• template ：组件的HTML页面展示部分，有且只有一个根标签
• script ： js脚本，存放路由、数据展示等信息，可以导入导出组件
• style ：存放样式　　

5.项目运行流程

• 项目运行，加载入口文件main.js

/*
html文件中，通过script src = 'xxx'标签引入js文件。
而vue中，通过 import 变量名 from 文件路径 的方式导入文件，不光可以导入js文件。
1.变量名: 指的是为导入的文件起一个名称，不是指导入的文件的名称，相当于变量名。
2.文件路径: 指的是文件的相对路径
*/
import Vue from 'vue'
import App from './App.vue'
import router from './router'
//关闭启动提示
Vue.config.productionTip = false
//创建Vue实例
new Vue({
router, //为整个项目添加路由
render: h => h(App) //这是一个函数ES6语法,作用是生成模板: App = App.vue
}).$mount('#app') //挂载的是App.vue组件中的id为app的区域

• app.vue 页面入口文件

App.vue 中的模板(HTML代码)
<template>
<div id="app"> 挂载的是这个div
<div id="nav">
这里是两个路由导航链接
1. to="/" 项目根路径 跳转的是首页
<router-link to="/">Home</router-link> |
2. to="/about" 点击About按钮,跳转到about组件
<router-link to="/about">About</router-link>
</div>
router-view 的作用是 根据访问的路径,渲染路径匹配到的视图组件
<router-view/>
</div>
</template>

• router 路由

// 引入所需文件
import Vue from 'vue' //vue库
import VueRouter from 'vue-router' //vue-router库
import Home from '../views/Home.vue' //首页
//使用路由功能
Vue.use(VueRouter)
//创建路由规则
const routes = [
{
path: '/', //路径
name: 'Home', //名称
component: Home //组件 Home.vue
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */
'../views/About.vue')
}
] /
/创建路由管理器,管理routes
const router = new VueRouter({
routes
})
//export 用来导出模块 router就代表了整个路由文件
export default router

• 默认访问home组件

视图部分
<template>
<div class="home">
首页的logo
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
JS部分
<script>
//导入了一个组件 HelloWorld.vue @符号表示 src这个目录
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
}
} <
/script>

• 组件的传参
  • 利用props 属性, 表示组件可以接受参数

    <Header msg="hello"></Header>
    
    <script>
        export default{
            name:"Header",
            props:{
                 msg: String
            }
            // data() {
            //     return {
            //         msg: 'hello vue 组件',
            //     };
            // },
    
        }
    </script>

6. elementUI

element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建

• 安装：npm i element-ui -S

  "dependencies": {
    "core-js": "^3.6.5",
    "element-ui": "^2.15.3",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0"
  },

• 导入element-ui资源到入口文件main.js

//导入组件库
import ElementUI from 'element-ui'
//导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css'
//配置Vue插件 将El安装到Vue上
Vue.use(ElementUI);

• 复制Element 按钮样式 到app.vue文件的 template下
• 启动项目 npm run serve, 查看页面

7. vue-cli 工程改造

• 删除components 目录下的 HelloWord.vue组件
• 删除App.vue中的部分内容
• 删除router文件下的路由文件 index.js部分内容
• 删除views目录下的 About.vue 与 Home.vue
• 安装axios，实现异步更新 npm i axios  导入axios 相关资源
  

  //引入axios
  import axios from 'axios'
  //Vue对象使用axios
  Vue.prototype.axios = axios;

8.跨域问题

• 跨域是指通过JS在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，只要协议、域名、端口有任何一个不同，都被当作是不同的域,浏览器就不允许跨域请求
• 跨域的允许主要由服务器端控制。服务器端通过在响应的 header 中设置 Access-Control-AllowOrigin 及相关一系列参数，提供跨域访问的允许策略
• 解决方法：
  • 在POM文件中引入依赖

    <!-- 解决跨域问题所需依赖 -->
    <dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>2.5</version>
    </dependency>

  • 在web.xml中 配置跨域 filter

<!--配置跨域过滤器-->
<filter>
<filter-name>corsFilter</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>corsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>