vue-cli

一、单页面应用程序（SPA）

一个web网站中只有唯一的一个HTML页面，所有的功能与交互都在这个唯一的页面完成。
vue-cli 是Vue.js 开发的标准工具，简化了程序员基于webpack创建工程化的Vue项目的过程。

二、安装和使用

1.安装
vue-cli 是 npm 上的一个全局包。

npm install -g @vue/cli

基于vue-cli 快速生成工程化的Vue项目

vue create 项目的名称

• 创建打开项目，index.html就是单页面入口
  

2.目录的构成

assets 文件夹：存放项目的静态文件，例如：css、图片
componments 文件夹：程序员封装的可复用的组件
main.js 是项目的入口文件，项目运行前先执行
App.vue 组件是定义 UI 结构

3.vue 项目的运行流程
通过 main.js 把 App.vue 渲染到 index.html 的指定预留的 el 区域

// main.js

// 导入vue这个包，得到vue构造函数
import Vue from 'vue'
// 导入App.vue 根组件，将来把App.vue中的模板结构，渲染到HTML页面中
import App from './App.vue'
// router 路由
import router from './router'
// vuex 状态管理
import store from './store'

Vue.config.productionTip = false

// 创建vue 实例对象
new Vue({
  router,
  store,
  // render函数指定组件，渲染到页面
  render: h => h(App)
}).$mount('#app')

三、Vue组件

1.组件化开发就是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。
2. vue 组件的三个组成部分

• template ：组件模板结构，只有一个大的div
• script ： 组件的 JS 行为
• style ：组建的样式 , 如：less 的应用，scope 在当前组件生效

// router

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  }
]

// App.vue

<template>
  <div>
    <router-view/>
  </div>
</template>

// HomeView.vue
<template>
  <div class="test-box">
     <h3>用户自定义---{{username}}</h3>
     <button @click="changeName">修改用户名</button>
  </div>
</template>

<script>

// 默认导出
export default {
  name: 'HomeView',
  // 数据源
  // 注意：vue组件中的data不能指向对象，必须是函数
  // data:{
  //   username:'zs'
  // }
  data(){
    // return 出去的{}中，可以定义数据
    return {
      username:'admin'
    }
  },
  methods:{
    changeName(){
      // 在组件中，this 就表示当前组件的实例对象
      console.log(this)
      this.username='娃哈哈'
    }
  },
  // 当前组件的侦听器。。。
  watch:{},
  computed:{},
  filters:{}
}
</script>
<style>
  .test-box{
    background-color: pink;
  }
</style>