vue项目梳理

vue实例

• vue2.x中创建vue实例，挂载到dom节点

点击查详情

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({  //实例化vue，构造器
        el: '#vue_det',  //el表达式，类似css中id
        data: {  //定义属性
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {//定义函数方法
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
    //可直接使用该实例对象
    vm.site = "goushen"
    //$用户区分属性
    document.write(vm.$el === document.getElementById('vue_det')) // true
</script>
 

• vue3.x创建vue实例，挂载到dom节点

点击查详情

<script type="text/javascript">
    const HelloVueApp = {
        data() {
            return {
                message: 'Hello Vue!!'
            }
        }
    }
    Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
 
<script type="text/javascript">
    Vue.createApp({
        data(){
            return{
                msg : '重庆'
            }
        }
    }).mount("#app")
</script>
 
<script type="text/javascript">
// 创建 Vue 应用
const app = Vue.createApp({
})
// 定义名为 todo-item 的新组件
app.component('todo-item', {
  template: `<li>This is a todo</li>`
})
// 挂载 Vue 应用
app.mount('#app')
</script>
 

• vue-cli构建的vue项目

// main.js中创建vue实例
import Vue from 'vue'
import App from './App.vue'
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
 
--------------------------------------------------------
 
// 等同于
new Vue({
  router: router,    // es6写法，注册router为vue的属性
  render: function (createElement) {   // 根组件App.vue作为vue的属性
    return createElement(App);
  }
}).$mount('#app')
 

参考

main.js作为入口文件，引入router、element-ui、vuex等，在main.js中将这些组件注册为vue实例的属性

• vite构建vue项目，创建vue实例

//main.js中
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
 
// index.html
<div id="app"></div>
<script type="module" src="/src/main.js"></script>

router

• 路由跳转：
  安装router、less、less-loader -> 新建组件 -> 配置路由 -> 路由出口 -> main.js中挂载到vue

// 新建子组件login.vue
<template>
    <div>
        登录组件
    </div>
</template>
<script>
// 默认导出
export default {}
</script>
// style中可使用less，socped表示style只有在当前组件生效 
<style lang="less" scoped>
</style>
 
// router/index.js中配置路由
import Login from '../components/Login.vue'  
Vue.use(VueRouter)
const router = new VueRouter({
  routes: [
    {path: '/', redirect: '/login'},  // 重定向
    {path: '/login', component: Login}  // 访问/login路由，跳转到login组件
  ]
})
 
// 根组件中编写路由出口
<router-view></router-view>
 
// 在入口文件main.js中引入router/index.js，挂载到vue实例
import router from './router'
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
 

• 子组件中执行路由跳转
  router/index.js中，将router引入、实例化、默认导出

import VueRouter from 'vue-router'
// 创建router实例
const router = new VueRouter({
  routes: [
    {path: '/home', component: Home} 
  ]
})
// 导出
export default router
 
// 入口文件中，导入router，作为vue实例的属性
import router from './router'
new Vue({
  router,     // es6语法，等同于  router: router,
  render: h => h(App)
}).$mount('#app')
 
// 相当于注册为vue的属性，子组件中直接跳转
this.$router.push("/home");
 

css样式

• 全局样式放到assets/css/global.css；之后在入口文件main.js中引入

• 在子组件的template标签中可使用html标签，style标签中使用样式

element-ui

• element-ui使用

// 1. 安装插件vue-cli-plugin-element
// 2. element.js中引入所需组件，注册为自己的组件
    import {Input} from 'element-ui'
    Vue.use(Input)
// 3. 入口文件main.js中引入element.js，挂载到vue实例
    import './plugins/element.js'
// 4. 直接在子组件中使用
 

参考

• 可将element-ui的组件注册为vue实例的属性

// element.js中引入组件
import {Message} from 'element-ui'
// 挂载到vue实例的自定义属性message，这样就能通过this.$message使用Message
Vue.prototype.$message = Message
// login.vue中使用
this.$message.error("登录失败！");
 

axios

• axios使用
  安装依赖axios -> 入口文件导入 -> 子组件中使用

// main.js中导入axios
import axios from 'axios'
// axios默认配置
axios.defaults.baseURL='http://localhost:8888/user'
// 将axios注册为vue实例的属性
Vue.prototype.$http = axios 
// this.$http表示axios，post请求，参数一为路由，参数二为data
this.$http.post("login", this.loginForm);