使用cdn加载vue.js

搭建vue的时候，一般都使用vue官方推荐的命令行工具。

在编写完，需要打包的时候，默认会把所有代码合并生产新文件。其中包括，包括自己写的和各种库,例如vue。

就会导致打包出来很大，

虽然会把vue和各种依赖的库，公共代码分离出来,合并成一个文件，

但由于还是放在自己服务器,如果使用cdn的话,会更利于程序的加载速度.

修改

如何使用官方命令行创建项目,这里就不做说明了,

• 修改build/webpack.base.conf.js,在最下面填写

  // ...
  externals: {
    'vue': 'Vue'
  }
  

  webpack的文档,是这样说的.

  防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

  在这里，就是需要把vue等不要打包进去，在运行中从cdn获取vue和各种库。

• 修改config/index.js

  build: {
      // ...
      assetsPublicPath: './'
      // ...
  }
  

  这里不修改也可以，因为测试的时候，实在本地打开，默认是/根目录，要修改为相对目录./。

  所以要修改build里面的assetsPublicPath。

• 修改src/main.js,

  new Vue({
    el: '#app',
    router,
    // template: '<App/>',
    render (h) {
      return h('App');
    },
    components: { App }
  });
  

  把字符串模板templat修改为函数式,

  这里使用体积小的vue，不带有字符串解析编译器。因为运行时版本相比完整版体积要小大约 30%。

  也可以不用修改，就使用完整版。vue对不同构建版本的解释。

  如果你是使用vue-cli创建的项目，*.vue单文件开发项目，默认会编译template，成函数式。所以，如果你是这样，完全可以使用体积小的vue，

  但是，由于默认只会编译单文件内的template，里面的script，如果你用jsx编写，就不会编译，所以这里需要把src/main.js，字符串模板templat修改为函数式。

  如果你想在js文件内，在单文件里面的script使用jsx编写，可以按照vue文档内的方法，安装 Babel 插件。在最新的vue webpack， 默认已经安装了，如果没有安装，需要自行安装

  所以也可以这样写

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

• 修改index.html，把cdn放进去,

  <script src="https://cdn.bootcss.com/vue/2.5.9/vue.runtime.js"></script>
  

  在生产环境,可以使用vue.runtime.min.js。

最后执行

npm run build

编译完成以后,在dist文件夹看看是否正确。