vue 一步一步來

1. 安裝項目

首先是通過： https://github.com/vuejs-templates/webpack 下載代碼並新建一個項目：

$ cnpm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ cnpm install
$ cnpm run dev

安裝過程有提示你選擇技術棧：

? Project name f7-vue-demo
? Project description A Vue.js project
? Author 學江 
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "f7-vue-demo".

   To get started:

     cd f7-vue-demo
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

2.1 添加Element 插件(Element很少支持移動端，放棄)

https://github.com/ElemeFE/element

http://element.eleme.io/#/zh-CN/component/quickstart

$ npm install element-ui -S

2.2 添加Mint UI插件(Mint組件太少，比如沒有Card/Modal等，模板少，放棄)

http://mint-ui.github.io/#!/zh-cn

2.3. 添加Frameword7-Vue插件

http://framework7.io/vue/templates.html

F7提供了豐富的移動端插件，還有許多成型的模板，用F7+Vue應該是個很好的選擇

安裝教程參考： http://framework7.io/vue/templates.html
$ git clone https://github.com/nolimits4web/Framework7-Vue-Webpack-Template F7-Vue-Webpack-Demo
$ cd F7-Vue-Webpack-Demo
$ cnpm install
$ cnpm run dev

Project Structure

• src/components - folder with custom .vue components
• src/pages - app .vue pages
• src/main.js - main app file where you include/import all required libs and init app
• src/routes.js - app routes
• src/app.vue - main app structure/component
• dist/css - app styles, put custom app CSS styles here as well
• dist/css/build.css - Vue components styles will be extracted here on npm run build

3. 修改代碼

最後src/main.js的代碼如下：

import Vue from 'vue'
import App from './App'
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(Element)

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})
 

src/app.vue的代碼如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>

components/Hello.vue的代碼如下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <el-button @click="visible = true">按鈕</el-button>
    <el-dialog v-model="visible" title="Hello world">
      <p>歡迎使用 Element</p>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      visible: false
    }
  }
}
</script>

4. 運行

$  cnpm run dev

程序正常運行。