自学Vue-笔记【不定时更新】

目录

一.下载教程

CLI下载

下载create-vue

Vue文件作用

二.安装git

初始化git

三.下载Element-plus

1.下载

2.按需引入

3.字体图标下载&使用

4.Element-plus定制样式

四.Axios

安装

全局引入

组件中引入

基础封装（超时、拦截器、测试）

五.模板语法

插值语法

1.文本插值

2.html插值

3.属性插值（id、css、自定义属性）

---

一.下载教程

第一步，下载node.js

官网Node.js

第二步，下载vue cli 或 create-vue

                create-vue是vue cli 切换来的，可以理解为升级版，基于vite

        官网

         Vue.js - The Progressive JavaScript Framework | Vue.js

        中文官网

        Vue.js - 渐进式 JavaScript 框架 | Vue.js​​​​​​

        cli

        https://cli.vuejs.org/

CLI下载

1.下载cli：win+r cmd 之后输入以下命令

npm install -g @vue/cli

2.下载完成后打开编辑器的终端输入以下命令（注：vue-test为文件名称，可以更改，但不能用大写字母，可以用-连接）

vue create vue-test

3.第一个为vue3，第二个为vue2，回车选择需要的版本

按需选择，练习用所以选了1和3

配置存放地址，通常选第1个

 是否保存并作为未来项目的预设，此处最好选n，因为根据不同项目有不同需求

4.之后回车等待下载安装就好啦。运行命令（记得先cd到vue项目）：

npm run serve

下载create-vue

1.安装命令：

npm init vue@latest

此处填写项目名称，默认vue-project

 是否需要添加TypeScript

是否需要添加jsx

 

是否添加路由

 

 是否添加状态管理

 是否添加vitest框架

是否添加E2E测试工具

ESLint格式化规范检查

 2.按照端口提示，cd到创建的文件夹，安装运行即可

cd XXX

npm  install

npm run dev

Vue文件作用

• assets                                     放公共的静态资源，如css、img
• components                            放公共的组件
• App.vue                                  主入口组件
• main.js                                    主入口文件
• registerServiceWorker.js        监听文件

---

二.安装git

初始化git

        create-vue默认不初始化git，所以需要自己手动

git init

git add .

git commit -m "init"        

---

三.下载Element-plus

element-plus为vue3设置的，如果是vue2的话需要下载element

1.下载

npm install element-plus --save

2.按需引入

npm install -D unplugin-vue-components unplugin-auto-import

3.字体图标下载&使用

npm install @element-plus/icons-vue

        在项目根目录下，创建plugins文件夹，在里面创建icons.js，之后写入以下固定代码

import *as components from "@element-plus/icons-vue";
export default{
    install :(app)=>{
        for(const key in components){
            const componentConfig=components[key];
            app.component(componentConfig.name,componentConfig);
        }
    }
}

        在main.js中引入icons.js

import elementIcon from "./plugins/icons"
app.use(elementIcon)

          现在可以使用文字图标了，可以在el-icon里添加大小和颜色，如

<el-icon :size="30" color="red">
<AddLocation/>
</el-icon>

4.Element-plus定制样式

a.安装

npm i sass -D

b.准备定制样式的文件

        在styles文件夹下创建element，在里边创建index.scss

        styles/element/index.scss

        在index.scss写入需要定制的颜色

c.进行样式覆盖

        在vite.config.js文件里，通知element，现在要采用sass样式

Components({
    resolves:[
    ElementPlusResolver({importStyle:"sass"}),
],
})

        在vite.config.js文件里，在resolve函数下写入以下代码，表示将文件进行覆盖

css:{
    preprocessorOptions:{
        scss:{
            additionalData:`@use"@/styles/element/index.scss"as*;`,
             }
         }
    }

        完成以上步骤后重启项目即可 

---

四.Axios

axios是一个基于promise的网络请求库

安装

npm install --save axios

或者

npm i axios

全局引入

在main.js中，写入以下代码

//引入
import axios from "axios"
//挂载
app.config.globalproperties.$axios=axios

最后在需要axios的组件里调用即可

//get里写组件
this.$axios.get("")

组件中引入

import axios from 'axios'

基础封装（超时、拦截器、测试）

1.在utils下创建http.js

import axios from 'axios'

2.超时时间

//定义httpInstance,让axios.create来接受
const httpInstance = axios.create({
    baseURL:"地址",
    //5s
    timeout:5000
})

3.拦截器（请求拦截）

//架子，用的时候补充
httpInstance.interceptors.request.use(config=>{


    return config
    },e=>Promise.reject(e))

4.拦截器（响应拦截）

httpInstance.interceptors.response.use(res=>res.data,e=>{
return Promise.reject(e)
})

5.引出

export default httpInstance

6.测试以上能否使用

在apis里创建testAPI.js

import httpInstance from "./utils/http"
export function getCategory(){
    return httpInstance({
        url:"home/category/head"
})
}

在main.js测试接口函数

import { getCategory } from "./apis/testAPI"

getCategory().then (res=>{
    console.log(res)
})

注：axios.create()方法可以执行多次，每次执行会生成一个新实例，可以用于不同业务的接口不同地址,如下

const http1 = axios.create({baseURL:"URL1"})
const http2 = axios.create({baseURL:"URL2"})
const http3 = axios.create({baseURL:"URL3"})

---

五.模板语法

插值语法

1.文本插值

ps：<template>里可以理解为写html的地方；

        {{ }}为插值符号，可以写单个表达式（运算、三维运算）、变量名，但不能写流程控制语句；

        return{ msg:  } msg的值不能识别标签如<a>，但可以用v-html=表示；

<template>
  <h1>{{ msg }}</h1>
  <h1>{{ add+10 }}</h1>
  <h1>{{ num>3?'yes':'no' }}</h1>
</template>

<script>
export default {
 name:'1',
 data(){
 return{
  msg :'来学习啦！！',
  add : 1,
  num : 2,
 }
}
}
</script>

运行结果：

2.html插值

v-html

用上述方法只能插入文本，如果想插入html，则需要用v-html

注： <div v-html="raw"></div>中，div里不能写任何东西，不然会报错

<template>
 <div v-html="raw"></div>
</template>
 
<script>
export default{
    data(){
        return{
            raw:"<a href='http://www.baidu.com'>百度</a>"
        }
    }
    }
</script>

运行结果：

3.属性插值（id、css、自定义属性）

v-bind: ，可简写成 ：

第一步：在需要动态变化的属性前加:或者v-bind:

 

第二步：在<script>里给属性写入需要用的css名称

 

第三步：在<style>里编写css，此时，如果需要one的样式，则在第二步里更改即可

<template>
 <div v-html="raw"></div>
 <div :id="aidd"></div>
</template>
 
<script>
export default{
    data(){
        return{
            aidd:"one"
        }
    }
    }
</script>
<style>
    #one{
    height: 500px;
    width: 500px;
    background-color: skyblue;
    }
    #two{
    height: 500px;
    width: 500px;
    background-color: orange;
    }
</style>

 运行结果：
图一为one样式，图二为two样式