Vue3基础笔记

2023-04-24

Vue3 前端基础学习笔记

1.创建项目

①使用Vue-cli搭建

选择一个文件夹，在终端打开

输入： vue create 项目名

按以下步骤选择（纯属个人习惯）

创建完成后将项目文件夹在VSCode中直接打开即可

Ctrl + ` 可以在VSCode中调出终端，输入以下命令运行项目

npm run serve

②使用Vite搭建

根据文档构建：开始 | Vite 官方中文文档 (vitejs.cn)

cmd 进入项目目录，执行 npm create vite@latest

根据提示完成操作后，项目就自动构建完成了

执行进入新创建的目录中，按照文档执行命令

2.axios的使用

在终端中输入

//安装axios

npm install –save axios

//安装处理post请求参数的依赖

npm install –save querystring

①全局引用

在main.js中加入以下代码

import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$axios = axios
app.use(router).mount('#app')

get请求实例

this.$axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php")
    .then(res=>{
      console.log(res.data);
    })

post请求实例

使用post前要导入querystring，在需要的组件内加入 import querystring from ‘querystring’

this.$axios.post('http://iwenwiki.com/api/blueberrypai/login.php', querystring.stringify({
      user_id: "iwen@qq.com",
      password:"iwen123",
      verification_code:"crfvw"
  }))
  .then(res=> {
    console.log(res.data);
  })

②组件中引用

与全局引用不同的是，在需要的组件内加入

1	import axios from 'axios'

并且使用axios.get()而不是this.$axios.get()

3.router的使用

按第一步中步骤生成的模板中已经自动生成了router

在 router文件夹的index.js中，若想要设置某个页面的访问路径，首先需要在routes数组中添加对象，如

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  },
  {
        path: '/abc',
        name: 'abc',
        component: () =>
            import ('../views/abc.vue')
   }
]

①通过`<router-link>`标签使用

在需要的页面中加入<router-link>和<router-view>

<router-link>: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个<a>标签.
<router-view>: 该标签会根据当前的路径, 动态渲染出不同的组件.
网页的其他内容, 比如顶部的标题/导航, 或者底部的一些版权信息等会和<router-view>处于同一个等级.
在路由切换时, 切换的是<router-view>挂载的组件, 其他内容不会发生改变.

②通过调用方法使用

比如给一个button添加一个jump的点击事件，让其跳转到某个页面

方法体可以这样写

methods:{
        jump(){
          this.$router.push('/abc');
    }
  }

4.element-ui的使用

首先必须安装element-plus，然后可以选择完整导入也可以选择按需导入

1	npm install element-plus --save

①完整导入

在mian.js中加入以下代码即可

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)

需要的组件直接在官网复制

②按需导入

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

然后修改配置文件

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = defineConfig({
    transpileDependencies: true,
    configureWebpack: {
        plugins: [
            AutoImport({
                resolvers: [ElementPlusResolver()]
            }),
            Components({
                resolvers: [ElementPlusResolver()]
            })
        ]
    }
})