建立一套新的vue項目

一，

   

     建立文件夾名稱

二，

    

     下載axios,vue-router

三，

   

   

    下載 elementui   npm i element-ui -S

    下載sass-loader , node-sass,由於項目中須要用到,也能夠下一個mint-ui以便使用

    下載simple-vue-validator（正則驗證）   npm install --save simple-vue-validator

     可安裝vuex     npm install vuex --save

      

 

 四，

     進入文件運行，npm  run  dev，出現這個即運行成功

      

五，開始進行項目

       在src的assets文件夾裏面，分別建立css，image，js文件夾

       css文件夾中放公用css文件，my-mint.scss文件是能夠修改mint-ui裏面的樣式，裏面的icon文件夾放字體圖標庫，

       image文件夾裏面放圖片

       js裏面放一些js屏幕適應的方法之類的

       詳情文件在碼雲，地址：https://gitee.com/liuxingting/vuedemo

      

六，

      將這些公用文件引入到app.vue文件中

  import "./assets/css/reset.css"
  import "./assets/css/icon/iconfont.css" import "./assets/js/flexible.js" import 'mint-ui/lib/style.css'

<style lang="scss">
  @import "./assets/css/index.scss"; #app { position:relative; font-size:$f28; height: 100%; } </style>

七，  

    下載的的依賴文件引入到main.js中，好比mint-ui

/**配置mint-ui**/
import Mint from 'mint-ui'; import './assets/css/my-mint.scss'; Vue.use(Mint);

八，

    路由設置index.js

import Vue from 'vue'
import Router from 'vue-router'

/**公共頁面**/ import homePage from '@/page/homePage/homePage' Vue.use(Router) export default new Router({ routes: [ { path: '/', name:'homePage', component: homePage } ] })

九，

    建立公用組件，component文件夾裏面都是公用組件，page文件夾裏面是其餘組件，

    好比建立一個公用的頭部組件vheader.vue

<template>
    <div class="headerBox">
        <div class="header">
            <div class="container clear tc">
                <div class="fl">
                    <span><i class="iconfont icon-jiantou2"></i></span>
                </div>
                <div class="titleBox">
                        <span class="title">{{headerTitle.title}}</span>
               </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default{ name:'header', data(){ return{ } }, props:['headerTitle'], } </script> <style scoped lang="scss"> </style>

十，

   建立一個其餘頁面，引用公用組件及公用樣式

   好比在page文件夾中建立一個homePage.vue，引用公用組件vheader和公用樣式

    

<template>
    <div class="homePage">
        <vheader :headerTitle="headerTitle"></vheader>
        <div class="search container">
            <input class="container" type="text" placeholder="搜索姓名、手機號" />
            <em class="em iconfont icon-sousuo Iconsearch"></em>
        </div>
    </div>
</template>
<script>
    import vheader from '../../components/vheader' export default{ name:'homePage', data(){ return{ headerTitle:{ title:'阿薩啊啊啊' } } }, components: { vheader }, mounted(){ }, methods:{ } } </script> <style scoped lang="scss"> @import '../../assets/css/index.scss'; p{ text-align: center; font-size: 0.26rem; color: $textColor_1; } </style>

  結果圖：

    

 

  最後這個項目就差很少了，詳情代碼請到https://gitee.com/liuxingting/vuedemo觀看

  不喜勿噴！

    

                                                                                                                                                                                                                      ------   END