合肥响应式网站开发方案,网站线框图怎样做,福州建站价格,自建虚拟主机网站源码1、vue-cli 使用
在开发中#xff0c;需要打包的东西不止是js、css、html。还有更多的东西要处理#xff0c;这些插件和加载器如果我们一一去添加就会比较麻烦#xff0c;vue官方提供了一个快速搭建vue项目的脚手架#xff0c;使用它能快速的构建一个web工程模板。
官网需要打包的东西不止是js、css、html。还有更多的东西要处理这些插件和加载器如果我们一一去添加就会比较麻烦vue官方提供了一个快速搭建vue项目的脚手架使用它能快速的构建一个web工程模板。
官网 Vue CLI
安装vue-cli3命令
npm install -g vue/cli3.x
创建项目
vue create my-project
运行项目
npm run serve 2、vue组件化及其通信
单文件组件什么是组件
所谓组件化就是把页面拆分成多个组件每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。
方便重复使用,提高开发效率。 组件通信
常见使用场景可以分为三类 父子通信一般通过props 和 $emit 实现什么是props? 例如el-button我们使用它时传递了不同的type而el-button组件就会根据不同的type属性值渲染不一样的按钮。什么是$emit
如el-select下拉框组件当选中值发生变化时它会执行 this.$emit(change,目前选中值)。
我们在页面中引用el-select 的地方使用事件监听 change接收子组件传来的change事件并进行处 理。 兄弟通信
Bus 或者 Vuex 跨级通信
BusVuexprovide / inject API、$attrs/$listeners 3、 vue-router使用
Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成让构建单页面应用变得易如反掌。地址https://router.vuejs.org/zh/
4、 vuex使用
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 是什么 | Vuex
5、 Axios使用
Axios 是一个基于 promise 的 HTTP 库可以用在浏览器和 node.js 中。
官网使用说明 · Axios 中文说明 · 看云
6、 UI框架-后台管理系统端
iview: iView - A high quality UI Toolkit based on Vue.js
element-ui: Element - The worlds most popular Vue UI framework
7、 项目目录
vue-cli3下的目录结构与vue-cli2工程目录的区别vue-cli3移除了配置文件目录config 和 build 文件夹增加了vue.config.js文件vue-cli3移除了static 静态文件夹vue-cli3新增了public文件夹将index.html移动到了 public 中。常用单页面模版 xxx.vue
template/templatescript
export default {name: ,mixins: [],components: {},props: {},data () {return {}},computed: {},watch: {},created () {},mounted () {},destroyed () {},methods: {}
}
/scriptstyle scoped langless/style
