/ Docker  

Webpack创建、运行vue.js项目及其目录结构详解

项目环境搭建：

1.安装node

进入node官网进行下载。

版本查看：

1
2
$ node -v
v6.10.1

注意：node版本最好新一点，推介6.0以上。

2.全局安装vue-cli

1
$ npm install -g vue-cli

注意： 如果安装失败可能需要root权限重新安装。

3.创建一个基于 webpack 模板的新项目

1
2
$ vue init webpack project-name	 	#(默认安装2.0版本)
$ vue init webpack#1.0 project-name #(安装1.0版本)

项目目录结构：

  • main.js是入口文件，主要作用是初始化vue实例并使用需要的插件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'

    Vue.config.productionTip = false

    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      template: '<App/>',
      components: { App }
    })

  • App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view></router-view>
        <hello></hello>
      </div>
    </template>

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

    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

  • index.html文件入口

  • src放置组件和入口文件

  • node_modules为依赖的模块

  • config中配置了路径端口值等

  • build中配置了webpack的基本配置、开发环境配置、生产环境配置等

运行项目：

1
2
3
4
$ cd project-name
$ npm install
$ npm run dev
# 上述步骤都完成后在浏览器输入：localhost:8080