vue项目搭建

 

一、项目开发为什么要使用 vue？

（1）vue 的简介

Vue.js 是一套构建用户界面的渐进式框架，Vue 采用自下向上增量开发的设计，其核心库只关注视图层，易于上手。在传统 web 开发中，我们搭建项目都以 html 结构为基础，然后通过 jquery 或者 js 来添加各种特效功能，需要去选中每一个元素进行命令，这些内容在简单的项目中或者不变的项目中还能应付得来，一旦项目改动或者项目工程较大，代码的修改将是复杂繁琐的，而这时候用了 vue，这些问题都不复存在。

（2）vue 的优势有哪些？

1、 数据绑定：vue会根据对应的元素，进行设置元素数据，通过输入框，以及get获取数据等多种方式进行数据的实时绑定，进行网页及应用的数据渲染 。

2、 组件式开发：通过vue的模块封装，它可以将一个web开发中设计的各种模块进行拆分，变成单独的组件，然后通过数据绑定，调用对应模版组件，同时传入参数，即可完成对整个项目的开发。

二、如何使用 vue 开发一个后台管理系统？

基于 vue + element-ui 开发，可借用 vue-element-admin 框架搭建的基本结构。

 

后续有机会的话会写一写vue开发后台管理系统的小demo。

三、如何使用 vue 开发一个移动端项目？

（1）安装脚手架

cnpm i @vue/cli -g 
vue create myapp / vue ui
cnpm i @vue/cli-init -g / cnpm i vue-cli -g
vue init webpack myapp

（2）创建项目

vue create myapp
cd myapp
cnpm run serve

（3）设置项目的基本结构

src

* api
* assets
* components
* lib
* mock
* store
* views
  App.vue
  main.js
  registerServiceWorker.js
  router.js
  store.js

（4）创建页面基本结构

需要添加 样式库 scss

• App.vue

    <div id="app">
    <div class="container">
    <header class="header"></header>
    <div class="content"></div>
    </div>
    <footer class="footer"></footer>
    </div>

（5）创建各个页面

home kind cart user detail

（6）设定路由

routes: [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    components: {
      default: () => import('@/views/home/index.vue'),
      footer: Footer
    }
  },
  {
    path: '/kind',
    name: 'kind',
    components: {
      default: () => import('@/views/kind/index.vue'),
      footer: Footer
    }
  },
  {
    path: '/cart',
    name: 'cart',
    components: {
      default: () => import('@/views/cart/index.vue'),
      footer: Footer
    }
  },
  {
    path: '/user',
    name: 'user',
    components: {
      default: () => import('@/views/user/index.vue'),
      footer: Footer
    }
  }
]

App.vue

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

components/Footer.vue

<template>
  <footer class="footer">
    <ul>
      <router-link to="/home" tag="li">
        <span class = "iconfont icon-shouye"></span>
        <p>首页</p>
      </router-link>
      <router-link to="/kind" tag="li">
        <span class = "iconfont icon-tubiao113"></span>
        <p>分类</p>
      </router-link>
      <router-link to="/cart" tag="li">
        <span class = "iconfont icon-gouwuche"></span>
        <p>购物车</p>
      </router-link>
      <router-link to="/user" tag="li">
        <span class = "iconfont icon-weibiaoti2fuzhi12"></span>
        <p>我的</p>
      </router-link>
    </ul>
  </footer>
</template>

到此，基本的框架已经搭好了，各个页面的跳转就已经可以实现了，剩下的就是往各个页面添加元素了。 后续有时间会继续完善，继续更新