vue-cli脚手架 #2
Comments
组件创建一个.vue后缀的文件，这种文件是定义一个vue的组件，里面包含html模版，样式和js脚本，经过webpack处理把vue转化成我们页面上的元素 <template>
<p>{{name}}</p>
</template>
<script>
export default {
data() {
return {
name: 'my name is wsscat'
}
}
}
</script>上面我们创建完组件之后，就要在main.js引入，注意组件的模版要用template的闭合标签把它包起来 main.js import Vue from 'vue'
import Wsscat from './components/wsscat.vue'
new Vue({
el: 'body',
components: {
Wsscat,
}
})在上面可以看到我们用import方法来引入了vue框架和wsscat组件，注意引入组件是要写相对路径，每写一个新的组件都要在这里注册，并把它们放在components这个属性的对象里面 上面我们都配置好的话就可以在index.html里面把这个组件的名字以标签的写法渲染出来 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my-first-vue-project</title>
</head>
<body>
<wsscat></wsscat>
</body>
</html>如果要在一个组件里面引入另外一个组件 wsheader.vue <template>
<header>wsscat</header>
</template>
<style>
header {
position: fixed;
top: 0;
height: 50px;
width: 100%;
line-height: 50px;
background-color: red;
text-align: center;
color: white;
}
</style>我们一样也是要在wsscat.vue的组件里面import再components注册这个组件，然后把组件的名字以标签的名字放到模版闭合标签里面就可以使用了 <template>
<wsheader></wsheader>
<p>{{name}}</p>
</template>
<script>
import wsheader from './wsheader.vue'
export default {
data() {
return {
name: 'my name is wsscat'
}
},
components:{
//"wsheader":require('./wsheader.vue');
wsheader
}
}
</script>这里import和require的写法均可 import wsheader from './wsheader.vue'
//code
wsheader
extend
var Abc = Vue.extend({
template: '<div>A custom component!</div>'
})component要把这个构造器用作组件，需要用
配合路由可以用 var Abc = Vue.extend({
el:function(){
return "#wsscat"
},
data:function(){
return {
wsscat:"wsscat"
}
},
template: '<div>新的组件<div id="wsscat">{{wsscat}}</div><router-view></router-view></div>',
replace: false,
})
router.map({
'/wsscat': {
component: Wsscat
},
})
router.redirect({
'*': "/wsscat"
});
router.start(Abc, '#app')这里注意的是我们在路由中有component属性并对应写上组件名，所以我们在使用路由中每次都已经配置好component注册组件 还有Vue.extend()构造的Abc组件里面的data属性和el属性都是以函数形式返回一个对象，因为如果不是用函数返回对象，那么所有的实例将共享同一个对象，那不是我们想要的 路由嵌套router.map({
'/wsscat': {
component: Wsscat,
subRoutes: {
'/': {
component: {
template: '<p>Default sub view for Foo</p>'
}
},
}
},
})在我们上面的路由中在加一个属性 在wsscat.vue的组件中要加上 |
|
ES5写类是这么写的 var obj = {
wsscat : function ( ) {
//code
}
} ;ES6写类可以这么写 var obj = {
wsscat ( ) {
//code
}
} ;ES6用这个新语法来缩短申明，里面就不用写function关键字了，这两种写法其实本质是一样的 <template>
<wsheader></wsheader>
<p>{{name}}</p>
</template>
<script>
import wsheader from './wsheader.vue'
export default {
data() {
return {
name: 'my name is wsscat'
}
},
components:{
//"wsheader":require('./wsheader.vue');
wsheader
}
}
</script>注意的是不管关系模块输出了什么，通过export default指令就能加载到默认模块，不需要通过花括号来指定输出的模块，一个模块只能使用export default一次 <template>
<wsheader></wsheader>
<p>{{name}}</p>
</template>
<script>
import wsheader from './wsheader.vue'
export default {
data: function() {
return {
name: 'my name is wsscat'
}
},
components:{
//"wsheader":require('./wsheader.vue');
wsheader
}
}
</script> |
路由安装路由 sudo npm install vue-router并在main.js里面引入 import VueRouter from 'vue-router'路由不能在 <div class='view'>
<router-view></router-view>
</div>加上 <style scoped>
.view{
position: absolute;
top: 50px;
}
</style>这里注意App.vue这个 <script>
import wsheader from './components/wsheader'
export default {
//在App.vue要加上replace: false，不然会报错
replace: false,
components: {
wsheader
}
}
</script> |
|
注意进入路由的url格式 http://localhost:8080**/#!/wsscat**
http://localhost:8080**/#!/autumns**
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Wsscat from './components/wsscat.vue'
import WsHeader from './components/wsheader.vue'
import Autumns from './components/autumns.vue'
Vue.use(VueRouter)
Vue.config.debug = true;
// 创建一个路由器实例
// 创建实例时可以传入配置参数进行定制，为保持简单，这里使用默认配置
var router = new VueRouter()
// 定义路由规则
// 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend
router.map({
'/wsscat': {
component: Wsscat
},
'/autumns': {
component: Autumns
},
})
router.redirect({
'*': "/wsscat"
});
// 现在我们可以启动应用了！
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
router.start(App, '#app')App.vue <template>
<wsheader></wsheader>
<div class='view'>
<a v-link="{ path: '/wsscat' }">Go to wsscat</a>
<a v-link="{ path: '/autumns' }">Go to autumns</a>
<router-view></router-view>
</div>
</template>
<script>
import wsheader from './components/wsheader'
export default {
//在App.vue要加上replace: false，不然会报错
replace: false,
components: {
wsheader
}
}
</script>
<!--局部样式-->
<style scoped>
.view {
position: absolute;
top: 50px;
}
</style>
<style>
* {
margin: 0;
padding: 0;
}
</style>index.html <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my-first-vue-project</title>
</head>
<body id="app">
</body>
</html> |
发布npm run build命令会让项目生成一个dist的静态文件，再把静态文件放到对应的服务器就可以运行 |
vue-resourcevue的一个发送ajax请求的插件 export default {
//在App.vue要加上replace: false，不然会报错
replace: false,
components: {
wsheader
},
data: function() {
return {
token: "123"
}
},
methods: {
getData: function() {
this.$http.get('http://localhost/vue/my-first-vue-project/test.php',
{
token:this.token,
}
).then((response) => {
//请求成功的回调
console.log(response)
}, (response) => {
//请求失败的回调
});
}
}
}当然箭头函数相当于这种下面写法 getData: function() {
this.$http.get('http://localhost/vue/my-first-vue-project/test.php',
{
token:this.token,
}
).then(function(response){
//请求成功的回调
console.log(response)
}, function(response){
//请求失败的回调
});
}两种写法本质上一样 getData: function() {
this.$http.jsonp('http://localhost/vue/my-first-vue-project/test.php',
{
callback:"JSON_CALLBACK",
token:this.token,
}
).then(function(response){
//请求成功的回调
console.log(response)
}, function(response){
//请求失败的回调
});
}后端test.php代码对应为 <?php
//header("Access-Control-Allow-Origin:*");
echo $_GET['callback']."(".json_encode(array("name"=>"wsscat")).")";
?>我们平时在组件更多的时候是准备阶段去请求数据回来，放在ready属性里面 ready: function() {
this.$http.jsonp('http://localhost/vue/my-first-vue-project/test.php', {
callback: "JSON_CALLBACK",
token: this.token,
}).then(function(response) {
//请求成功的回调
console.log(response.data)
}, function(response) {
//请求失败的回调
});
}ajax请求数据回来并把它绑定到视图，注意这里this的指向， ready: function() {
var self = this;
this.$http.jsonp('http://localhost/vue/my-first-vue-project/test.php', {
callback: "JSON_CALLBACK",
token: this.token,
}).then(function(response) {
//请求成功的回调
console.log(response.data)
self.userInfos = response.data//绑定数据到data对象里面，再把数据带到视图
}, function(response) {
//请求失败的回调
});
}，
data: function() {
return {
token: "123",
userInfos:"",
}
}, |
插件使用的时候记得用Vue.use()来调用 // 通过 Browserify 或 Webpack 使用 CommonJS 兼容模块
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了调用此方法
Vue.use(VueRouter) |
使用SASS首先在webpack.base.conf.js文件里面添加 {
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},这一句可以让我们webpack把我们的scss格式转化为css格式 然后我们就可以在组件中写scss格式的样式，注意是scss，因为.scss 和.sass是sass的两种格式，.scss 是类css的语法，.sass是缩进语法 <style lang='scss' scoped>
div{
color: #008080;
}
</style>所以如果你是sass的语法的话你就不能有缩进 <style lang='sass' scoped>
div{color: #008080;}
</style> |
使用vux官方中文文档 import {
Style,
Group,
Cell
} from 'vux';然后注册 export default {
components: {
wsheader,
Style, // style component is necessary
Group,
Cell
},
}我们就可以这样在模版中使用这些组件 <template>
<div>
<group>
<cell title="vue" value="cool"></cell>
</group>
</div>
</template>还可以引入样式 <style lang='scss' scoped>
div {
color: #008080;
}
@import '~vux/dist/vux.css';
</style> |
|
又重新开了一遍，还是一样的糊涂，╮(╯▽╰)╭ |
|
Vue 跟angular 1 的路由拦截有没有什么案例呀？ |
|
用Vue写了一下nodejs后台系统，突发奇想要用this.$http.post请求，但报错了，服务器挂了，想来这里找找解决方法，竟然偏偏没post。。。。。 |
|
感觉好难啊 |
|
应该写个router监测 @E-GreeHe 下次我加上去~ |
|
good 很强，反正我我看不懂，希望能多配置点图 |
如果是mac系统安装全局包的时候，在npm前面写上sudo，添加权限
初始化第一个项目
定位到我们的项目文件夹位置
cd my-first-vue-project然后安装package.json的依赖包
安装完成之后我们就可以运行服务器运行我们的第一个项目
用
npm run dev能打开服务器是因为我们在生成package.json中定义了一个scripts所以执行
npm run dev相当于执行node build/dev-server.js并在浏览器打开下面的地址
The text was updated successfully, but these errors were encountered: