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
程序正常运行。