脚手架vue-cli 的部署
安装一个6.0+版本的node。
安装一个npm淘宝镜像加快下载速度。
低版本无法安装vue-cli。
wget https://nodejs.org/download/release/v6.0.0/node-v6.0.0.tar.gz
解压tar包
tar -zvxf node-v6.0.0.tar.gz
make
make install
- npm install -g cnpm –registry=https://registry.npm.taobao.org
- npm isntall -g vue-cli
- npm install webpack -g
- vue init webpack my-project
- cd my-project
- npm install
- npm run dev
vue组件的使用
大体思路是脚手架的根目录下有一个index.html , vue-cli在index.html中定义了一个div的id:app。然后在注册了一个根模板App在src目录下。其他的页面等通过组件的形式注册到App.vue中。
模板的格式
<template></template>
<script></script>
<style></style>
模板的数据双向绑定
<!--以class名称在App.vue中注册了一个<hello></hello>标签,需要在App.vue <script>中引入import Hello from './components/Hello'-->
<!--template中 -->
<div class="hello">
<span>{{msg}}</span>
</div>
<!--script中 -->
module.exports (等同于es6 exports default) = {
data() {
return {
msg : "something"
}
}
}
<!--从而实现双向数据绑定 -->
全局重置样式如何引入
在App.vue中 中实现
<style src="./assets/csslayout.css">
这里可以引入css、scss或其他预加载css。
<!--未了解:style中scoped等 -->