关于Vue环境的搭建

创建模板项目

安装vue脚手架

    $ npm install -global vue-cli

初始化项目

  新建工作文件夹(如:Vue)

    $ cd Vue/
    $ vue init webpack first-vue #"first-vue"为file name,可更改

  使用webpack打包项目,输入项目名称、描述、作者、是否使用sass后即在目录下生成项目.

安装项目依赖

    $ cd first-vue
    $ npm install

启动项目

    $ npm run dev

发布项目

    $ npm run build

  当执行完此操作时,文件目录里生成dist文件夹和相关发布后的文件.

给项目添加组件

添加文件

  在src目录下新建components目录,添加first-component.vue,template 写 html,script写 js,style写样式

    <template>
    　　<div id="firstcomponent">
    　　　　<h1>标题</h1>
    　　　　<a> 作者：{{ author }} </a>
    　　</div>
    </template>

    <script type="text/javascript">
    　　export default {
    　　　　data () {
    　　　　　　return {
    　　　　　　　　author: "Langery"
    　　　　　　}
    　　　　}
    　　}
    </script>

    <style>
    </style>

引入

  打开App.vue,引入firstcomponent组件,并删除vue-cli脚手架生成的一些无意义html.在<script></script>标签内的第一行写

    <script type="text/javascript">
        import firstcomponent from './components/firstcomponent.vue'
    </script>

注册

  在<script></script>标签内的data代码块后面加上 components: { firstcomponent }.记得中间加英文逗号

    export default {
    　　name: 'app',
    　　data () {
    　　　　return {
    　　　　　　msg: 'Welcome to Your Vue.js App'
    　　　　}
    　　},
    　　components: { firstcomponent }
    }

使用

  在<template></template>内加上<firstcomponent></firstcomponent>

    <template>
    　　<div id="app">
    　　　　<img src="./assets/logo.png">
    　　　　<h2>{{msg}}</h2>
    　　　　<firstcomponent></firstcomponent>
    　　</div>
    </template>

添加路由功能

终端安装vue-router

    $ cnpm install vue-router --save

src下添加views目录和页面文件

  在目录下面新建两个文件,view1.vue和view2.vue

    <template>
        <div >
            <h1>我是View1</h1>
            <a> 我是View1 </a>
        </div>
    </template>

    <script type="text/javascript">
        export default {
            name: 'view1',
        }
    </script>

    <style>
    </style>

    <template>
        <div >
            <h1>我是View2</h1>
            <a> 我是View2</a>
        </div>
    </template>

    <script type="text/javascript">
        export default {
            name: 'view2',
        }
    </script>

    <style>
    </style>    

引入并注册vue-router

  添加router.js文件,这里添加了两个路由,分别指向view1和view2.

    import Vue from 'vue'
    import Router from 'vue-router'
    import View1 from './views/view1.vue'
    import View2 from './views/view2.vue'

    Vue.use(Router)

    export default new Router({
        linkActiveClass: 'active',
        // 路由配置
        routes: [
            {
                path: '/view1',
                component: View1
            }, {
                path: '/view2',
                component: View2
            }, {
                path: '/*',
                component: View1
            }
        ]
    })

使用router

  修改main.js,引入router并指定当前vue实例

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router.js'

    new Vue({
        el: '#app',
        router,
        render: h => h(App)
    })

添加路由链接和出口

  修改App.vue,添加链接和出口.

    <template>
    　　<div id="app">
    　　　　<img src="./assets/logo.png">
    　　　　<h2>{{msg}}</h2>
    　　　　<first-component></first-component>
            <br>
            <router-link to="/view1">Go to view1</router-link>
            <router-link to="/view2">Go to view2</router-link>
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
    　　</div>
    </template>

使用axios请求数据

终端安装axios

    cnpm install axios --save

引入axios

  修改main.js文件,添加Vue.prototype.$ajax = axios,引入axios.

    import Vue from 'vue'
    import axios from 'axios'
    import App from './App.vue'
    import router from './router.js'

    Vue.prototype.$ajax = axios

    new Vue({
        el: '#app',
        router,
        render: h => h(App)
    })

在视图中请求数据

  修改view1.vue的js,引入axios,请求服务器数据.

    <script type="text/javascript">
    import axios from 'axios'

    export default {
        name: 'view1',
        mounted: function() {
            axios.post('/jhb/getslides')
            .then(function (response) {
                console.log(response);
            })
            .catch(function (response) {
                console.log(response);
            });
        }
    }
    </script>  

Vue项目打包

  修改config/index.js里的assetsPublicPath字段,将初始项目中的根目录/改为./

---