Vuejs + Webpack 项目配置总结

Vuejs + Webpack 项目配置总结

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="http://www.tanmer.com/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

    程序正常运行。

    本项目源代码地址: https://github.com/krongk/vue-webpack-element

    蜀ICP备15035023号-4