Vue-CLI项目框架小知识

目录列表含义

node_modules：项目依赖
从新创建项目依赖
1、进入项目目录
2、 npm install

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>