vue

vue框架的使用

Posted by PanMin on July 12, 2017

vue框架的使用

vue环境安装

npm install vue   # 安装新版本vue

项目构建工具:

npm install -g vue-cli   # vue项目构建工具
vue -V 					 # 有版本号返回说明安装成功
vue init webpack myproject

使用node8.1.0版本执行初始化项目命令时会卡在description这一步,升级到8.1.3就行了。

vue用法

关键词: new vue data、methods、watch

v-text v-html v-if v-for v-bind

组件之间通信: props

具体用法请看官方文档:https://cn.vuejs.org/v2/guide/installation.html

遇到的问题

vue多组件库样式冲突:使用scoped解决

<style scoped>
</style

多个组件注册:

import Vue from 'vue'

import Item1 from './components/Item1'
import Item2 from './components/Item2'
Vue.component('item1',Item1)
Vue.component('item2',Item2)

vue常用框架

状态管理:vuex http请求:axios(从2.0开始建议使用,vue-resource已经停止维护了) 前台路由管理:vue-router(https://router.vuejs.org/zh-cn/installation.html) 界面框架: * 饿了么出品 https://github.com/ElemeFE/element * Mint UI https://github.com/ElemeFE/mint-ui/ * vue-material https://github.com/vuematerial/vue-material

运行

npm run dev

打包

npm run bulid

这个会生成dist目录,用这个目录直接放到服务器对应目录下就行; 比如node.js作为后台的话,express框架在app.js中设置了public为static资源,就可以放到public文件夹下,不过要看下js和css引用的路径对不对。