0909开始写前端代码

由于我之前安装好了vue和nodejs, 所以该部分安装过程就不再记录.

新建vue工程

参考了这篇博客开始了前端工程之旅！

1. 新建vue工程

vue init webpack
vue init webpack blog-front

2. 安装依赖

npm install

如果npm安装很慢记得切换下载源

3. 在components目录下新建一个views目录，里面写我们的vue组件

4. 在views目录下新建first.vue

<template>
<div class="first-app">
    {{msg}}
    </div>
</template>

<script>
    export default{
        name:"first",
        data(){
            return {
                msg:"Welcome to FirstApp"
            };
        }
    };
</script>

<style>

</style>

5. 在router目录下的index.js里面配置路由路径

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import first from '@/components/first'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path: '/first',
      name: 'first',
      component: first
    }
  ]
})

​

安装Element UI依赖

参考该博客

1. 安装element-UI

npm i element-ui -S

2. 在components下新建Test.vue, 向其中添加Element UI测试代码

<template>
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
    <el-menu-item index="1">处理中心</el-menu-item>
    <el-submenu index="2">
        <template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-menu-item index="3">
    <a href="https://www.ele.me" target="_blank">订单管理</a>
</el-menu-item>
</el-menu>
</template>

<script>
    export default {
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1'
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

3. 在App.vue中添加test.vue

<template>
<div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <Test></Test>
    </div>
</template>

<script>
    import Test from './components/test.vue'

    export default {
        components:{
            Test,
        },
        name: 'App'
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

4. 打开main.js,加入element-ui的js和css

import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI

成功！！！