在这篇文章中，主要记录一些在使用vue.js写业务时遇到的一些问题及其解决方式，还有一些小技巧。

  1. 配置入口文件
  2. 根路由 App.vue 的配置
  3. vue.js SPA 的路由的配置
  4. /static 和 /src/assets 目录下的资源文件的区别
  5. 5. dependencies 和 devDependencies

1. 配置入口文件

  1. 使用vue-cli快速构建的应用，会在项目src/目录下生成一个入口文件app.js(index.js)，在这里vue.js的引用，路由配置等等工作就可以初始化了。当然也可以引入公共的资源文件(.js/.css)。
  2. 首先引入当前目录的根组件App.vue和router.js，以及vuex、mixin，最后实例化根组件，基本如下： 
    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
    28
    29
    30
    31
    32
    33
    import App from './App'
    import router from './router/router'

    // 全局css
    import './assets/css/common.scss'

    // 全局配置
    import './config'

    // axios 配置
    import './assets/js/axios.conf'

    // import store from './store'

    // Vue mixin
    import './assets/js/mixin'

    // 日历组件
    import Calendar from '../static/js/libs/calendar'
    Vue.use(Calendar)

    Vue.config.productionTip = false

    // 切换路由
    // import './assets/js/router.switch'

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

2. 根路由App.vue的配置

  1. 作为引用根组件，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">
        <div class="invalidRoute" v-if="invalidRoute"></div>
        <div class="modal-forbidden-operate"></div>

        <router-view></router-view>
      </div>
    </template>

    <script>

    export default {
      name: 'App',
      created () {
        
      },
      // update 里面的函数在每次路由切换时只执行一次，非常棒；而mounted不行
      updated () {
        this.setShareConfig();
      },
      computed: {
        invalidRoute () {
          return !this.$route.matched || this.$route.matched.length === 0;
        }
      }
    }
    </script>
  2. 和所有页面(.vue)一样，他的template标签下只允许有一个div标签。但是该文件下还得有一对<router-view></router-view>标签，用以表明所有页面路由的嵌套入口，页面最终都是从这里注入的。

3. vue.js SPA的路由的配置

  1. 把路由模块分开来，单独一个文件来管理路由： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // index.js(app.js) 我们在这里会引入项目入口文件和router
    import App from './App'
    import router from './router/router' // 下面的那个router.js文件

    // 创建一个 router.js 文件，用于管理路由
    Vue.use(VueRouter)
    export default new VueRouter({
      mode: 'history', // 开启路由history模式
      routes: [
        // 动态路由模式（跟友好的加载方式），按需加载
        { path: '/index', name: 'index', component: resolve => require(['../pages/index'], resolve) },
        ...
      ]
    })

4. /static和/src/assets目录下的资源文件的区别

  1. 其实区别很简单，对于assets/目录下的资源，在项目构建阶段，npm run build的时候，该目录下的.js/.css文件会被webpack做相应的处理，比如使用babel将ES6语法转成ES5语法，使用post-css等将css加入兼容前缀，将scss语法转为常规css文件。。。
  2. 一般我们习惯将不会被经常改变的文件放在/static目录下，比如vue.js框架文件（使用CDN加载），第三方UI库文件等等。而/src/assets下习惯放一些经常概念的文件，比如公用css/js文件等。

5. dependencies和devDependencies

  1. 网上关于package.json中的这两个配置的解释太多了，基本都没啥问题。但是针对我的项目而言，基本不用把npm包装在dependencies里。大家都知道，一般针对项目运行时需要的依赖包（即会打包到项目里面），我们才会放在dependencies里，对其他工具类包（比如sass-loader,node-sass,babel-loader,webpack）才会安装到devDependencies里面。
  2. 但是在我的项目里，针对dependencies里的依赖（vue.js axios）等，我都用CDN进行加载，根本不用再项目入口app.js里面import进来，所以这个问题就不存在了。