[30天 Vue学好学满 DAY4] Vue-cli 基本架构

Vue-cli 专案基本架构

favicon.ico:仅用於 index.html
index.html:网页入口文件

<!-- div = 区块 && id = app, 由main.js指定其 vue -->
<div id="app"></div>

assets:图片资料夹

• 图片:logo.png

<!-- in App.vue -->
<img alt="Vue logo" src="./assets/logo.png">

components:组件资料夹

• 组件:HelloWorld.vue
  -> views画面组件资料夹，後续新增

App.vue:Instance，专案入口，在其内部引入其他组件

<!-- 引入component HelloWorld 并带入参数msg -->
<HelloWorld msg="Welcome to Your Vue.js App"/>

需於下方引入区引入

import HelloWorld from './components/HelloWorld.vue'

并於components中注册

components: {
    HelloWorld
  }

main.js:专案核心

import Vue from 'vue'
import App from './App.vue'

// 阻止启动生产消息，常用作指令。
Vue.config.productionTip = false

// 透过 render & $mount 挂载 区块 与 实例
// 区块 '#app': index.html
// 实例 App: 引入App.vue
new Vue({
  render: h => h(App),
}).$mount('#app')

productionTip比较

Vue.config.productionTip = false

Vue.config.productionTip = true

.vue架构

template

撰写HTML、引入其他组件，为主要视图区。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <!-- 引入component HelloWorld 并带入参数msg -->
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

script

import区
进行资源的引入，引入无使用会报错

<script>
import HelloWorld from './components/HelloWorld.vue'
// 接续下方

export default区
变数定义、方法撰写、监听、生命周期控制皆於此区块，为主要开发区。

// 接续上方
export default {
  components: {
    HelloWorld
  },
  props: {},
  data() {
    return {};
  },
  methods:{},
  created() {}
}
</script>

style区
定义、撰写CSS

<style>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 50px;
}
</style>

有错误请不吝指教!

参考资料
https://vuejs.org/
https://book.vue.tw/
https://www.cnblogs.com/wr20190131/p/10494197.html