使用vue构建企业级应用步骤

npm install -g vue-cli
vue init webpack-simple demo
cd demo
npm install
npm run dev

import Vue from 'vue'

new Vue({
  el: '#app',
  render: h => h('ul', {
    'class': 'movies'
  }, [
    h('li', {
      'class': 'movie'
    }, 'Star Wars'),
    h('li', {
      'class': 'movie'
    }, 'Blade Runner'),
  ])
})

npm i -D babel-preset-vue
npm i -D babel-polyfill

import 'babel-polyfill'

<template>
  <div>
    <p>{{message}}</p>
    <input
      type="text"
      v-model="message"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "Hello Word"
    };
  }
};
</script>
<style>
p {
  color: grey;
}
</style>

import Vue from 'vue'
import 'babel-polyfill'
import Test from './Test.vue'
new Vue({
  el: '#app',
  ...Test
})

npm install --save-dev pug pug-loader

<template lang="pug">
ul.movies
  li.movie Star Wars
  li.move Blade Runner
</template>

npm install --save-dev less less-loader

<template>
  <article class="article">
    <h3 class="title">Title</h3>
  </article>
</template>
<style lang="less" scoped>
.article {
  .title {
    color: red;
  }
}
</style>

<template>
  <li class="movie">
    {{movie.title}}
  </li>
</template>
<script>
export default {
  props: ["movie"]
};
</script>
<style lang="less" scoped>
.movie:not(:last-child) {
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: soild 1px rgba(0, 0, 0, 0.1);
}
</style>

<template>
  <ul class="movies">
    <Movie
      v-for="movie of movies"
      :key="movie.id"
      :movie="movie"
    >

    </Movie>
  </ul>
</template>
<script>
import Movie from "./Movie";
export default {
  components: {
    Movie
  },
  data() {
    return {
      movies: [
        { id: 0, title: "Star Wars" },
        {
          id: 1,
          title: "Blade Runner"
        }
      ]
    };
  }
};
</script>

npm install --save vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import FAQ from './components/FAQ.vue'
Vue.use(VueRouter)

const routes = [{
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/faq',
    name: 'faq',
    component: FAQ
  },
]

const router = new VueRouter({
  routes,
  mode: 'hash'
})

export default router

<template>
  <main class="home">
    <h1>首页</h1>
  </main>
</template>

<template>
  <main class="faq">
    <h1>常见问题</h1>
  </main>
</template>

<template>
  <div class="app-layout">
    <header class="header">
      <div><img
          src="../assets/logo.png"
          class="img"
        >

      </div>
      <div>My shirt shop</div>
    </header>

    <router-view />
  </div>
</template>
<style lang="less">
@import "../style/main";
</style>

<style lang="less" scoped>
.header {
  .img {
    width: 64px;
    height: 64px;
  }
}
</style>

import Vue from 'vue'
import 'babel-polyfill'
import AppLayout from './components/AppLayout.vue'
import router from './router'
new Vue({
  el: '#app',
  render: h => h(AppLayout),
  router
})