Vue-CLI项目框架小知识

Posted 2022-07-01 huanghongzheng

目录列表含义

node_modules：项目依赖

public：公用文件
favicon.ico：页面标签图标
index.html：项目的唯一页面(单页面)

src：项目开发文件目录
assets：静态资源
css|js|img
components：小组件
.vue
views：视图组件
.vue
App.vue：根组件
main.js：主脚本文件
router.js：路由脚本文件 - vue-router
store.js：仓库脚本文件 - vuex

*.xml|json|js：一系列配置文件
README.md：使用说明

main.js

import Vue from 'vue'  // node_modules下的依赖直接写名字
import App from './App.vue'  // ./代表相对路径的当前目录，文件后缀军可以省略
import router from '@/router.js'  // @ 代表src的绝对路径
import store from './store'
// 在main中配置的信息就是给整个项目配置
// 已配置 vue | 根组件App | 路由 | 仓库
// 以后还可以配置 cookie | ajax(axios) | element-ui

Vue.config.productionTip = false;  // Tip小提示

new Vue(
    el: '#app',
    router: router,
    store,
    // render: function (fn) 
    //     return fn(App)
    // 
    // 解释：function (h) return 1 | (h) => return 1 | h => 1
    render: readTemplateFn => readTemplateFn(App)
);

自定义组件

scoped样式组件化 - 样式只在该组件内部起作用

<!-- components/OwenComponent.vue -->

<!--html代码：有且只有一个根标签-->
<template>
    <div class="owen">
        <h1 :class="active: is_active" @click="btnClick">owen组件</h1>
    </div>
</template>
<!--js代码：在export default  的括号内完成组件的各项成员：data|methods|... -->
<script>
    export default 
        data () 
            return 
                is_active: false
            
        ,
        methods: 
            btnClick() 
                this.is_active = !this.is_active;
            
        
    
</script>
<!--css代码：scoped样式组件化 - 样式只在该组件内部起作用 -->
<style scoped>
    .active 
        color: red;
    
</style>

views视图中

<!-- views/About.vue -->

<template>
    <div class="about">
        <h1>This is an about page</h1>
        <h2>好</h2>
        
        <!-- 使用组件 -->
        <owen-comp></owen-comp>
        <OwenComp></OwenComp>
    </div>
</template>
<script>
    // import OwenComp from '../components/OwenComponent'
    import OwenComp from '@/components/OwenComponent'  // 导入组件，组件名随意
    export default 
        components: 
            OwenComp,  // 注册组件
        
    
</script>