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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值