目录
一.下载教程
第一步,下载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
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样式