上海项目前端文件
parent: 5867c788 | 补丁 | 提交 | ignore whitespace
whychdw
2019-07-02 b6f0af6b4bc1b8fd159e22e56b3199ee8c902799 
test
16个文件已添加
11974 ■■■■■ 已修改文件
.gitignore 21 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
babel.config.js 5 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
package-lock.json 11627 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
package.json 49 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
public/favicon.ico 补丁 | 查看 | 原始文档 | blame | 历史
public/index.html 17 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/App.vue 67 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/assets/logo.png 补丁 | 查看 | 原始文档 | blame | 历史
src/components/HelloWorld.vue 58 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/VueTest1.vue 23 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/VueTest2.vue 17 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/libs/util.js 9 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main.js 42 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/router.js 10 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/index.vue 13 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/vuex/store.js 16 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 
 .gitignore


New file


@@ -0,0 +1,21 @@


.DS_Store


node_modules


/dist




# local env files


.env.local


.env.*.local




# Log files


npm-debug.log*


yarn-debug.log*


yarn-error.log*




# Editor directories and files


.idea


.vscode


*.suo


*.ntvs*


*.njsproj


*.sln


*.sw?




 babel.config.js


New file


@@ -0,0 +1,5 @@


module.exports = {


  presets: [


    '@vue/app'


  ]


}




 package-lock.json


New file


Diff too large




 package.json


New file


@@ -0,0 +1,49 @@


{


  "name": "mytest",


  "version": "0.1.0",


  "private": true,


  "scripts": {


    "serve": "vue-cli-service serve",


    "build": "vue-cli-service build",


    "lint": "vue-cli-service lint"


  },


  "dependencies": {


    "core-js": "^2.6.5",


    "iview": "^3.4.2",


    "vue": "^2.6.10",


    "vue-router": "^3.0.6",


    "vuex": "^3.1.1"


  },


  "devDependencies": {


    "@vue/cli-plugin-babel": "^3.8.0",


    "@vue/cli-plugin-eslint": "^3.8.0",


    "@vue/cli-service": "^3.8.0",


    "babel-eslint": "^10.0.1",


    "eslint": "^5.16.0",


    "eslint-plugin-vue": "^5.0.0",


    "vue-template-compiler": "^2.6.10"


  },


  "eslintConfig": {


    "root": true,


    "env": {


      "node": true


    },


    "extends": [


      "plugin:vue/essential",


      "eslint:recommended"


    ],


    "rules": {},


    "parserOptions": {


      "parser": "babel-eslint"


    }


  },


  "postcss": {


    "plugins": {


      "autoprefixer": {}


    }


  },


  "browserslist": [


    "> 1%",


    "last 2 versions"


  ]


}




 public/favicon.ico




 public/index.html


New file


@@ -0,0 +1,17 @@


<!DOCTYPE html>


<html lang="en">


  <head>


    <meta charset="utf-8">


    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <meta name="viewport" content="width=device-width,initial-scale=1.0">


    <link rel="icon" href="<%= BASE_URL %>favicon.ico">


    <title>mytest</title>


  </head>


  <body>


    <noscript>


      <strong>We're sorry but mytest doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>


    </noscript>


    <div id="app"></div>


    <!-- built files will be auto injected -->


  </body>


</html>




 src/App.vue


New file


@@ -0,0 +1,67 @@


<style scoped>


.layout{


    border: 1px solid #d7dde4;


    background: #f5f7f9;


    position: relative;


    border-radius: 4px;


    overflow: hidden;


}


.layout-logo{


    width: 100px;


    height: 30px;


    background: #5b6270;


    border-radius: 3px;


    float: left;


    position: relative;


    top: 15px;


    left: 20px;


}


.layout-nav{


    width: 420px;


    margin: 0 auto;


    margin-right: 20px;


}


.layout-footer-center{


    text-align: center;


}


</style>


<template>


  <div id="app">


    <Layout>


      <Header>


        <Menu mode="horizontal" theme="dark" active-name="1">


          <div class="layout-logo"></div>


          <div class="layout-nav">


              <MenuItem name="1">


                  <Icon type="ios-navigate"></Icon>


                  Item 1


              </MenuItem>


              <MenuItem name="2">


                  <Icon type="ios-keypad"></Icon>


                  Item 2


              </MenuItem>


              <MenuItem name="3">


                  <Icon type="ios-analytics"></Icon>


                  Item 3


              </MenuItem>


              <MenuItem name="4">


                  <Icon type="ios-paper"></Icon>


                  Item 4


              </MenuItem>


          </div>


        </Menu>


      </Header>


      <Content style="height:calc(100vh - 64px); overflow-y: auto">


        <router-view></router-view>


      </Content>


      <!-- <Footer></Footer> -->


    </Layout>


  </div>


</template>




<script>




export default {


  name: 'app'


}


</script>




 src/assets/logo.png




 src/components/HelloWorld.vue


New file


@@ -0,0 +1,58 @@


<template>


  <div class="hello">


    <h1>{{ msg }}</h1>


    <p>


      For a guide and recipes on how to configure / customize this project,<br>


      check out the


      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.


    </p>


    <h3>Installed CLI Plugins</h3>


    <ul>


      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>


      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>


    </ul>


    <h3>Essential Links</h3>


    <ul>


      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>


      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>


      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>


      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>


      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>


    </ul>


    <h3>Ecosystem</h3>


    <ul>


      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>


      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>


      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>


      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>


      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>


    </ul>


  </div>


</template>




<script>


export default {


  name: 'HelloWorld',


  props: {


    msg: String


  }


}


</script>




<!-- Add "scoped" attribute to limit CSS to this component only -->


<style scoped>


h3 {


  margin: 40px 0 0;


}


ul {


  list-style-type: none;


  padding: 0;


}


li {


  display: inline-block;


  margin: 0 10px;


}


a {


  color: #42b983;


}


</style>




 src/components/VueTest1.vue


New file


@@ -0,0 +1,23 @@


<template>


    <div class="layout">


        <input type="text" v-model="age" />


        <input type="button" v-on:click="setAge" value="点我" />


    </div>


</template>


<script>


export default {


    data() {


        return {


            age: 10


        }


    },


    methods: {


        setAge: function() {


            this.$store.commit('setAge', this.age);


        }


    },


    mounted: function() {


        this.age = this.$store.state.age;


    }


}


</script>




 src/components/VueTest2.vue


New file


@@ -0,0 +1,17 @@


<template>


    <div class="layout">


        <h3>{{mAge}}</h3>


    </div>


</template>


<script>


export default {


    data() {


        return {}


    },


    computed: {


        mAge() {


            return this.$store.state.age;


        }


    }


}


</script>




 src/libs/util.js


New file


@@ -0,0 +1,9 @@


let util = {




};


util.title = function (title) {


    title = title ? title : 'iView project';


    window.document.title = title;


};




export default util;




 src/main.js


New file


@@ -0,0 +1,42 @@


import Vue from 'vue'


import VueRouter from 'vue-router'


import Routers from './router'


import store from './vuex/store'


import iView from 'iview'


import Util from './libs/util'


import App from './App.vue'


import 'iview/dist/styles/iview.css'




// 添加vue-router


Vue.use(VueRouter);




// 添加iview基础组件


Vue.use(iView);




Vue.config.productionTip = false




const RouterConfig = {


  mode: 'history',


  routes: Routers


};




// 定义路由


const router = new VueRouter(RouterConfig);




router.beforeEach((to, from, next) => {


  iView.LoadingBar.start();


  Util.title(to.meta.title);


  next();


});




router.afterEach((to, from, next) => {


  iView.LoadingBar.finish();


  window.scrollTo(0, 0);


});






new Vue({


  router,


  store,


  render: h => h(App),


}).$mount('#app')




 src/router.js


New file


@@ -0,0 +1,10 @@


const routers = [


    {


        path: '/',


        meta: {


            title: '首页'


        },


        component: (resolve) => require(['./views/index.vue'], resolve)


    }


];


export default routers;




 src/views/index.vue


New file


@@ -0,0 +1,13 @@


<template>


    <Layout>


        内容


    </Layout>


</template>




<script>


    export default {


        data() {


            return {}


        }


    }


</script>




 src/vuex/store.js


New file


@@ -0,0 +1,16 @@


import Vue from 'vue'


import Vuex from 'vuex'


Vue.use(Vuex);




const store = new Vuex.Store({


    state: {


        age: 18


    },


    mutations: {


        setAge: function(state, age) {


            state.age = age;


        }


    }


});




export default store;