Vue学习

vue-cli3命令

  • 创建项目: vue create [options] < app-name >
    • 启动项目: cd project && npm run server
  • 可视化创建项目: vue ui

vue项目目录结构

目录/文件 说明
build
config
node_modules
src 主要开发目录,
- assets:
- components:
- App.vue:
- main.js:
- index.css:
static
public
test
.xxxx文件
package.json
README.md
dist

起步

  • 刚开始学习vue,不推荐直接使用vue-cli命令行来创建项目,先从页面引入vue.global.js文件来学习
    下载此文件并自行提供服务 vue.global.js

Vue3应用是通过createApp 函数创建的,语法格式为:

import { createApp } from 'vue'

const app = createApp({
    /*根组件选项*/
})

API风格

  • 选项式api

    • 用包含多个选项的对象来描述组件的逻辑
    • 例: data对象实例属性,method对实例属性的一些操作方法,mounted生命周期钩子 
      export default {
          data() {
              return{};
          },
          beforeCreate() {

          }
      }

  • 组合式api

    • 通常搭配<script setup>使用 
      setup() {
          const test = ref("hello")
          //通过ref定义响应式变量
          //ref()返回带有value属性的对象
      }

模板语法

指令由 v- 作为前缀

  1. v-once: 只更新一次

  2. v-html: 通过模板输出原始HTML语句

    请仅在内容安全可信时再使用 v-html，并且永远不要相信用户提供的 HTML 内容(防止XSS攻击)

  3. v-bind: 想要响应式(动态)地绑定一个 attribute(属性)，应该使用 v-bind
    简写: : 

    <!--两者相同-->
    <div v-bind:id="dynamicId"></div>
    <div :id="dynamicId"></div>

  4. v-on: 它将监听 DOM 事件
    简写:@

  5. v-for: 语法:v-for="item in Todo"

  • 文本插值

  • 原始html

  • 使用JavaScript表达式

    <!--常见-->
    {{ number + 1 }}
    {{ ok ? 'YES' : 'NO' }}
    {{ message.split('').reverse().join('') }}
    <div :id="`list-${id}`"></div>

    <!--仅支持表达式-->
    <!-- 这是一个语句，而非表达式 -->
    {{ var a = 1 }}

    <!-- 条件控制也不支持，请使用三元表达式 -->
    {{ if (ok) { return message } }}

VUE3依赖

  • 依赖查看:package.json

    "dependencies": {
        "axios": "^1.2.0",
        "element-plus": "^2.2.25",
        "vue": "^3.2.41",
        ...
    },

element-plus

  • 全部引入
    //main.js 引入element-plus
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'

    const app = createApp(App)

    app.use(ElementPlus)
    app.mount('#app')
    //createApp(App).mount('#app')

axios

vue-router

vuex

Vuex 是一个专为Vue.js应用程序开发的状态管理模式+库
采用集中式储存 管理 应用的所有组件的状态

项目打包

// 修改vite.config.js配置
//打包相对路径
export default defineConfig({
  base: './',
})

proxy (代理) 跨域代理

  • 使用proxy跨域代理
    // 修改vite.config.js配置
    export default defineConfig({
      plugins: [vue()],
      //跨域代理
      server: {
        proxy: {
          '/xx': {
            target: "http://127.0.0.1:port/"
            //将目标路径target 代理到当前服务的/xx路由
          }
        }
      }
    })