vue新手入门

Vue

创建vue

• 删除已有node.js
  • 删除C:\Users\用户名\AppData\Roaming目录下的npm
  • 删除C:\Users\123\AppData\Local\目录下的npm-cache
• 下载node.js：14.21.3
  • 配置node.js
  • 配置镜像源
• yarn global add @vue/cli – 安装vue cli
• vue create 项目名
  

项目框架

• src/assets/common.less：公共样式
• src/components/common：公共组件
• src/components/home：views里home.vue对应的组件
• src/utils：公共js
  • /apis.js：接口地址
  • /constants.js：常量配置
  • /filter.js：工具函数

开发流程-前端

• 拆分页面模块，建立对应view和components
  • view

    <template>
      <!-- home页面 -->
      <div class="page-home">
      </div>
    </template>
    

  • component

    <template>
        <!-- home的轮播图 -->
        <div class="home-banner-box">
        </div>
    </template>
    

• 查找UI组件、实现组件模板、模型层准备数据、模拟数据
• 分析复用组件、新建文件、传递prop

开发流程-后端

• 分析并设计数据库模型，完成ORM编码、检测、同步
  
• 设计接口返回结构和错误约定、编写接口代码、模拟HTTP请求并测试

开发流程-接口联调

• 配置接口地址、使用axios获取数据、将数据放置模型层

模板

export default {
    components: {
    },
    data () {
        return {
            sightpos: ''
        }
    },
    computed: {
        ISHOME () {
        }
    },
    methods: {
        goBack () {
            this.$router.go(-1)
        }
    },
    created () {
    	this.isHot = this.$route.query.isHot
        this.getDataList()
    }
}
</script>

注册vuetUI

// main.js
import Vant from 'vant'
import 'vant/lib/index.css