写给后端同学的vue

文章内，图片很多，占据了一定的篇幅。有写后台的哥们说，vue怎么写，怎么新建一个vue项目，然后我想了想，觉得写一个面向后台同学的vue教程也是有必要，文章中几乎没讲css和vue细节处理的相关内容，减少接受不必要的信息量，降低vue的学习成本。如果有不清楚的地方，可以私信联系我，有不对不合理之处，敬请指出！我是迩伶贰！

安装vue-cli 脚手架

1. 安装nodejs环境

2. 安装vue-cli系列工具

  • npm install -g @vue/cli
  • npm install -g @vue/cli-service-global

3. vue create hello-world // 用vue 初始化hello-world 项目

3.1 vue create hello-world
3.2 跑起项目 npm run serve

很多后端同学的用的编辑器是 idea, 我这里也用idea演示这个,细节之处不是本文的重点，可查看 idea创建vue项目
打开刚才初始化后的项目

配置启动脚本，相对于配置java 的脚本要简单的多

启动：

访问地址

3.3 项目目录介绍：

  • node_modules , 项目依赖的模块包，我们需要的模块包都会下载到这个目录下，我们开发时不用管
  • public  静态文件放的位置，放一下大的静态文件
  • src 项目的源文件
    • assets 小的静态文件
    • components 组件，一些公用的组件，比如登录框，输入组件等
    • APP.vue vue项目的根组件
    • main.js 项目的主入口文件，一些需要的基本的js css 可在这里引入
  • package.json 项目依赖、介绍、基本配置等的清单文件，我们只需要看，scripts 里面的执行命令即可， 比如serve ->启动， build -> 构建打包
  • 其他 项目运行配置文件，可忽略

Tips：上面的内容了解即可，可不用深入，继续往下添加页面路由

4. 增加路由vue-router

4.1 安装路由 npm install vue-router -S


使用

4.2 在项目文件夹下新建router.js
4.3 写入代码
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from './components/HelloWorld';

Vue.use(Router);

export default  new Router({
    mode:'history',
    routes: [
        {
            path: '/helloworld',
            name: 'HelloWorld',
            component: HelloWorld
        }
    ]
})
4.4. 新建page文件夹，文件夹下面的都是为页面 .vue文件

4.5 修改router.js
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from './components/HelloWorld';
import Index from './page/index';
import List from './page/list';

Vue.use(Router);

export default  new Router({
    mode:'history',
    routes: [
        {
            path: '/helloworld',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/index',
            name: 'Index',
            component: Index
        },
        {
            path: '/list',
            name: 'List',
            component: List
        },
    ]
})
4.6 修改入口main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router';

Vue.config.productionTip = false

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

访问路由：

5. 增加axios， http请求库 (https://www.kancloud.cn/yunye/axios/234845)

5.1 安装库 axios , npm install axios -S
5.2 使用

以上面的list.vue 文件为例：

<template>
    <div>
        <h3>这是一个list 页面</h3>
        <ul>

            <li>
                <router-link to="/index">Index</router-link>
            </li>
        </ul>

        <h3>下面是axios请求到到数据</h3>
        <ul v-if="userList.length">
            <li v-for="item in userList" :key="item.id">
                姓名：{{item.name}}
            </li>
        </ul>

        <ul v-if="!userList.length">
            loading....
        </ul>
    </div>
</template>
<script>
    import axios from 'axios';
    export default {
        name: "Index",
        data(){
            return {
                userList: []
            }
        },
        created () {
            axios('http://localhost:4000/get/alluser')
                .then(res => {
                    this.userList = res.data.users;
                })
        }
    }
</script>
<style scoped>
    ul li {
        list-style: none;
        font-size: 16px;
    }
</style>

6. 增加脚手架可配置文件 vue.config.js

设置接口的跨域，vue-cli 启动的服务端口等

module.exports = {
    devServer: {
        port: 8090,
        proxy: 'http://localhost:4000'
    }
}

7. 打包项目

7.1 执行命令 npm run build

7.2 构建结果

会在项目目录下生成dist 文件夹，文件夹下的文件就是我们需要的静态文件

我们把打包后的静态文件扔进服务器即可，或者我们用ngxix 部署静态文件，index.html 就是最终指向的入口文件。
关于nginx的部署，需要的话可以参考： nginx会多少

10. 补充，使用第三方ui库

关于vue 实际操作可以参考我这篇笔记，在不定时更新中 (vue的实际应用)[https://www.cnblogs.com/adouwt/p/7911639.html]
整理不容易，转载请注明出处，我是迩伶贰，谢谢阅读！

posted @ 2019-07-21 13:25  adouwt  阅读(2262)  评论(2)  编辑  收藏  举报