在webpack构建的项目中使用vue、vue-router开发、es6的导入导出

1、导vue的包,搭建vue开发环境

  在webpack构建的项目中使用vue、vue-router开发、es6的导入导出_第1张图片

  在webpack构建的项目中使用vue、vue-router开发、es6的导入导出_第2张图片

 2、组件开发

  .vue文件----就是vue中纯粹的组件

   组件文件构成:tempalte  script  style---vue-loader会把这个.vue文件编译解析成js返回给main.js去打包

  webpack默认无法打包编译  .vue文件类型,需要安装相关的loader 

  在webpack构建的项目中使用vue、vue-router开发、es6的导入导出_第3张图片

  在webpack构建的项目中使用vue、vue-router开发、es6的导入导出_第4张图片

  在webpack构建的项目中使用vue、vue-router开发、es6的导入导出_第5张图片

  在webpack构建的项目中使用vue、vue-router开发、es6的导入导出_第6张图片

 

3、总结下使用方式步骤

  在webpack构建的项目中使用vue、vue-router开发、es6的导入导出_第7张图片

 4、es6的导入和导出   node的导入和导出(最好配套使用,不要混着用)

  在webpack构建的项目中使用vue、vue-router开发、es6的导入导出_第8张图片

  在webpack构建的项目中使用vue、vue-router开发、es6的导入导出_第9张图片

  在webpack构建的项目中使用vue、vue-router开发、es6的导入导出_第10张图片

  在webpack构建的项目中使用vue、vue-router开发、es6的导入导出_第11张图片

5、路由的用法

  在webpack构建的项目中使用vue、vue-router开发、es6的导入导出_第12张图片

   在webpack构建的项目中使用vue、vue-router开发、es6的导入导出_第13张图片在webpack构建的项目中使用vue、vue-router开发、es6的导入导出_第14张图片

   在webpack构建的项目中使用vue、vue-router开发、es6的导入导出_第15张图片

  在webpack构建的项目中使用vue、vue-router开发、es6的导入导出_第16张图片

6、样式---全局样式 、私有样式

  在webpack构建的项目中使用vue、vue-router开发、es6的导入导出_第17张图片

 

转载于:https://www.cnblogs.com/yangyutian/p/11061600.html

你可能感兴趣的:(在webpack构建的项目中使用vue、vue-router开发、es6的导入导出)