Vuejs + Webpack 項(xiàng)目配置總結(jié)
作者：探碼科技， 原文鏈接： http://nbbskj.com/tmf/187
Vuejs + Webpack 項(xiàng)目配置總結(jié)
1. 安裝項(xiàng)目
首先是通過(guò)：?https://github.com/vuejs-templates/webpack?下載代碼并新建一個(gè)項(xiàng)目：
$ cnpm install -g vue-cli $ vue init webpack my-project $ cd my-project $ cnpm install $ cnpm run dev
安裝過(guò)程有提示你選擇技術(shù)棧：
? Project name f7-vue-demo ? Project description A Vue.js project ? Author 學(xué)江? 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很少支持移動(dòng)端，放棄)
https://github.com/ElemeFE/element
http://element.eleme.io/#/zh-CN/component/quickstart
$ npm install element-ui -S
2.2 添加Mint UI插件(Mint組件太少，比如沒(méi)有Card/Modal等，模板少，放棄)
http://mint-ui.github.io/#!/zh-cn
2.3. 添加Frameword7-Vue插件
http://framework7.io/vue/templates.html
F7提供了豐富的移動(dòng)端插件，還有許多成型的模板，用F7+Vue應(yīng)該是個(gè)很好的選擇
安裝教程參考： 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. 運(yùn)行
$ ?cnpm run dev
程序正常運(yùn)行。
本項(xiàng)目源代碼地址：?https://github.com/krongk/vue-webpack-element
