vue-cli脚手架

Question

vue-cli脚手架

Wscats opened this issue 8 years ago · 15 comments

如果是mac系统安装全局包的时候，在npm前面写上sudo，添加权限

sudo npm install -g vue-cli

初始化第一个项目

定位到我们的项目文件夹位置

cd my-first-vue-project

然后安装package.json的依赖包

sudo npm install

安装完成之后我们就可以运行服务器运行我们的第一个项目

npm run dev

用npm run dev能打开服务器是因为我们在生成package.json中定义了一个scripts

所以执行npm run dev相当于执行node build/dev-server.js

并在浏览器打开下面的地址

http://localhost:8080

Answer 1 · 2016-08-20T15:18:25.000Z

组件

创建一个.vue后缀的文件，这种文件是定义一个vue的组件，里面包含html模版，样式和js脚本，经过webpack处理把vue转化成我们页面上的元素
wsscat.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里面把这个组件的名字以标签的写法渲染出来
wsscat.vue -> <wsscat></wsscat>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>my-first-vue-project</title>
  </head>
  <body>
    <wsscat></wsscat>
  </body>
</html>

如果要在一个组件里面引入另外一个组件
比如我们要在wsscat.vue里面引用wsHeader的组件

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

wsheader":require('./wsheader.vue')

extend

Vue.extend()创建一个组件构造器，也就是构建一个新的组件

var Abc = Vue.extend({
  template: '<div>A custom component!</div>'
})

component

要把这个构造器用作组件，需要用Vue.component(tag, constructor)注册
这tag就是我们把这个组件写成标签时候的字符串（如果tag为abc我们使用的时候就在视图写就可以了），而constructor就是注册时候组件的名字（也就是Abc）

Vue.component('abc',Abc)
<abc></abc>

配合路由

可以用Vue.extend()构建一个组件，把<router-view></router-view>放在该组件内，当然该组件不一定要用Vue.extend()方法构建，写成.vue文件放在组件中也可以，然后让执行router.start(Abc, '#app')创建一个 App实例，并且挂载到选择符#app 匹配的元素上

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>'
                }
            },
        }
    },
})

在我们上面的路由中在加一个属性subRoutes
然后传入一个对象如果是设置'/'那路由就是/wsscat
如果是设置'/ab'那路由就是/wsscat/ab

在wsscat.vue的组件中要加上<router-view></router-view>

Answer 2 · 2016-08-21T02:48:18.000Z

ES5写类是这么写的

var obj = {
      wsscat : function ( ) {
              //code
      }
} ;

ES6写类可以这么写

var obj = {
      wsscat ( ) {
              //code
      }
} ;

ES6用这个新语法来缩短申明，里面就不用写function关键字了，这两种写法其实本质是一样的
所以我们组件中data的写法下面两种都可以的

<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>

Answer 3 · 2016-08-21T04:26:18.000Z

路由

安装路由

sudo npm install vue-router

并在main.js里面引入

import VueRouter from 'vue-router'

路由不能在<router-view></router-view>上直接定义样式，如果要定义它的样式可以用一个div包含起来，并写在App.vue组件里面
例如这样，并且写上样式

<div class='view'>
        <router-view></router-view>
</div>

加上scoped属性意思是该样式只在该组件生效，而不会影响全局的样式

<style scoped>
    .view{
        position: absolute;
        top: 50px;
    }
</style>

这里注意App.vue这个<router-view></router-view>所在的组件一定要记得设置replace属性值，不然会报以下的错误

<script>
    import wsheader from './components/wsheader'
    export default {
        //在App.vue要加上replace: false，不然会报错
        replace: false,
        components: {
            wsheader
        }
    }
</script>

Answer 4 · 2016-08-21T23:24:52.000Z

注意进入路由的url格式

http://localhost:8080**/#!/wsscat**
http://localhost:8080**/#!/autumns**

main.js

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>

Answer 5 · 2016-08-29T13:29:27.000Z

发布

npm run build

命令会让项目生成一个dist的静态文件，再把静态文件放到对应的服务器就可以运行

Answer 6 · 2016-08-29T14:29:55.000Z

vue-resource

vue的一个发送ajax请求的插件
先安装sudo npm install vue-resource
然后引入依赖
import VueResource from 'vue-resource'
并使用
Vue.use(VueResource)
在组件中我们可以这样发送请求并带上需要请求的参数，注意这里在回调函数里面用了箭头函数

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){
                    //请求失败的回调
                });
            }

两种写法本质上一样function(response){}``(response) => {}
组件的视图
<button @click="getData()">GetData</button>
当然为了解决跨域，我们改为jsonp

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的指向，
用var self = 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:"",
            }
        },

Answer 7 · 2016-09-04T01:31:55.000Z

插件

使用的时候记得用Vue.use()来调用

// 通过 Browserify 或 Webpack 使用 CommonJS 兼容模块
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了调用此方法
Vue.use(VueRouter)

vue-router
vue-resource

Answer 8 · 2016-10-12T16:19:22.000Z

使用SASS

首先在webpack.base.conf.js文件里面添加sass-loader，就是下面这一句，
然后安装模块，sudo npm install node-sass

{
        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>

Answer 9 · 2016-10-12T23:54:01.000Z

使用vux

官方中文文档
 官方DEMO
sudo npm install vux
我们可以在.vue组件中想要引入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>

Answer 10 · 2016-10-13T12:14:21.000Z

又重新开了一遍，还是一样的糊涂，╮(╯▽╰)╭

Answer 11 · 2017-02-21T06:55:25.000Z

Vue 跟angular 1 的路由拦截有没有什么案例呀？

Answer 12 · 2017-03-23T03:30:19.000Z

用Vue写了一下nodejs后台系统，突发奇想要用this.$http.post请求，但报错了，服务器挂了，想来这里找找解决方法，竟然偏偏没post。。。。。

Answer 13 · 2017-04-27T08:51:48.000Z

感觉好难啊

Answer 14 · 2017-07-03T02:08:30.000Z

应该写个router监测

@E-GreeHe 下次我加上去~

Answer 15 · 2023-02-26T03:44:26.000Z

good 很强，反正我我看不懂，希望能多配置点图