Vue学习——搭建前端项目

Vue搭建前端项目

1.准备环境

需要安装nodejs,npm,cnpm等,使用的编辑器为vscode

2.创建项目

vue init webpack 项目名

项目创建完成后使用vscode打开，在终端运行

cnpm install

cnpm run dev

3.目录结构

参考以下的目录结构，新建文件夹，下面打‘ * ’的为新建文件夹

├── build // 构建服务和webpack配置
├── config // 项目不同环境的配置
├── dist // 项目build目录
├── index.html // 项目入口文件
├── package.json // 项目配置文件
├── src // 生产目录
│ ├── assets // 图片资源
│ ├── common * // 公共的css js 资源
│ ├── components // 各种组件
│ ├── moke * // 本地静态数据管理文件
│ ├── App.vue // 主页面
│ ├── vuex * // vuex状态管理器
│ ├── router // 路由配置器
│ └── main.js // Webpack 预编译入口

4.引入element-ui

cnpm i element-ui -S

打开项目：src/main.js,添加下面三条

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' (根据版本路径不同会有差异，按照自己版本路径)
Vue.use(ElementUI)

5.搭建简易布局和router

目录结构：

1.在src下新建views目录，views下创建layout目录，layout下创建components…

AppMain.vue

<template>
  <section>
    <router-view :key="key"/>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed:{
    key(){
      return this.$route.path
    }
  }
}
</script>

head.vue

<template>
  <div>
    this.is header
  </div>
</template>

<script>
export default {
  name: 'Head',
  components: {},
  data () {
    return {
    }
  }
}
</script>

sliderBar.vue

在这配置左侧菜单

<template>
  <div>
    <div>this.is sliderBar</div>
    <div>
    <router-link to="/page1">Go to page1</router-link>
    </div>
    <div>
    <router-link to="/page2">Go to page2</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'sliderBar',
  components: {},
  data () {
    return {
    }
  }
}
</script>

index.js

export {default as HeadBar} from './head'
export {default as SlideBar} from './sliderBar'
export {default as AppMain} from './AppMain'

layout.vue

<template>
  <el-container>
     <el-aside width="200px">
          <SlideBar></SlideBar>
      </el-aside>
    <el-container>
      <el-header>
        <HeadBar></HeadBar>
    </el-header>
      <el-main>
          <AppMain></AppMain>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {HeadBar ,SlideBar,AppMain}  from './components'
export default {
  components:{ HeadBar ,SlideBar,AppMain}
}
</script>

<style scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
</style>

page1.vue

<template>
  <div>
    <div>this.is page1</div>
  </div>
</template>

<script>
export default {
  name: 'Page1',
  components: {},
  data () {
    return {
    }
  }
}
</script>

App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

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

<style>
  html,body,#app,.el-container {
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
}
</style>

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' 

Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/views/layout/layout' 

Vue.use(Router)

export default new Router({
  routes: [
    /**{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }**/
    {
      path: '/',  //访问路径
      name: 'Layout', // 路径名
      component: Layout, //访问的组件,即访问‘/’,它会加载 Layouts 组件所有的内容。
      meta:{
        title:'首页'
      },
      children:[
        {
          path: 'page1',
          component: () => import('@/views/page1'),
          name: 'Page1',
        },
        {
          path: 'page2',
          component: () => import('@/views/page2'),
          name: 'Page2',
        }
      ]
    }
  ]
})

运行效果