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

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

做一个小实验 

在main.js中使用h函数挂载

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'),
  ])
})

一个企业级的应用还需要做Babel Vue预设

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

在main.js中导入babel-polyfill  以便旧版浏览器中可以使用新的js特性

import 'babel-polyfill'

 

再做一个小实验 
用对象展开运算符的方式挂载根组件

在src目录下创建Test.vue
 

<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>

在main.js上挂载
 

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

 

来源：oschina

链接：https://my.oschina.net/lilugirl2005/blog/3137128