vue项目编写总结-优快云博客

本文链接：https://blog.youkuaiyun.com/dashen_me/article/details/88087999

本文详细介绍了一个Vue项目的目录结构，包括关键文件如index.html、main.js和App.vue的作用，以及如何使用Vue-Router进行页面路由配置。通过具体示例展示了组件的导入、注册和使用方法，以及父子组件间的数据传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个vue项目跳到有package.json得文件夹，运行npm install 或cnpm install npm run dev

比较重要的几个文件

index.html 入口文件

main.js 引入的一些东西

App.vue

路由

import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from '@/views/Dashboard'
import ProcessList from '@/views/process/ProcessList'
import ProcessDetail from '@/views/process/ProcessDetail'
import FunctionsList from '@/views/functions/FunctionsList'
import LabelsList from '@/views/labels/LabelsList'
import Login from '@/views/Login'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Dashboard',
      component: Dashboard
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/processes',
      name: 'ProcessList',
      component: ProcessList

    },
    {
      path: '/processes/:id',
      name: 'ProcessDetail',
      component: ProcessDetail
    },
    {
      path: '/functions',
      name: 'FunctionsList',
      component: FunctionsList
    },
    {
      path: '/labels',
      name: 'LabelsList',
      component: LabelsList
    }
  ]
})

@代表src文件夹

组件分离

示例

<button v-for="(button,i) in buttons"
        @click="addNewNode(i)"
        :key="button.buttonType"
        :data-type="button.buttonType"
        :style={left:button.left,top:button.top}>
        {{button.buttonName}}
      </button>

循环  点击事件

组件传值

父组件：

1.引入子组件<Header :functionsActive="functionsActive" />

import Header from '@/components/Header'

export default {

name: 'FunctionsList',

data () {

return {

functionsActive: true,

components: {

Header

子组件：

export default {

name: 'Header',

props: ['processActive', 'functionsActive', 'labelActive'], //获取值

父组件调用子组件得方法

<FlowChart :graphData="graphData"

@getGraphdata="getGraphdata"

ref="transferFlow" />

that.$refs.transferFlow.connectEd() //调用子组件得方法

that.$emit('getGraphdata', that.graphData) //走父组件得方法

elementui select 选择框

 <el-select v-model="value"
            placeholder="请选择"
            @change="changeLabel">
            <el-option v-for="item in labels"
              :key="item.id"
              :value="item.value">
            </el-option>
          </el-select>

changeLabel (value) {  //value 切换到哪个得value
      this.itemS = false
      let obj = {}
      obj = this.labels.find((item) => {
        return item.value === value
      })
      this.tag_id = obj.id
      this.newProcesses = []
      if (this.tag_id !== 0) {
        this.newProcesses = this.processes.filter((item) => {
          return item.tag.id === this.tag_id
        })
        if (this.newProcesses.length === 0) {
          this.itemS = true
        }
      } else {
        this.newProcesses = this.processes
      }
    }

检测上传文件类型得

accept属性只能起到筛选作用

checkfile () {
      // console.log($("#file").val())
      var filepath = $('#file').val()
      var extStart = filepath.lastIndexOf('.')
      var ext = filepath.substring(extStart, filepath.length).toLowerCase()
      if (ext !== '.doc' && ext !== '.docx') {
        console.log('文件类型不对')
        return false
      }
      // var size = $("#file")[0].files[0].size
    },