一、单页面应用程序(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>