Vue-cli 3.0 搭建,以及vuex、axios、使用

  Vue-cli 3.0   搭建


  作为一个React资深爱好者,确实很少涉及Vue,为了了解React 和 Vue 之间的区别,于是自己搭建了一套Vue-cli 3.0的框架自己练习。

  github地址: https://github.com/zgc-we/VueDemo个人git团队项目

  话不多说,步入我们正题:

  


Vue-cli 3.0 简介

  Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:

  • 通过 @vue/cli 搭建交互式的项目脚手架。
  • 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
  • 一个运行时依赖 (@vue/cli-service),该依赖:
    • 可升级;
    • 基于 webpack 构建,并带有合理的默认配置;
    • 可以通过项目内的配置文件进行配置;
    • 可以通过插件进行扩展。
    • 一个丰富的官方插件集合,集成了前端生态中最好的工具。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性。


Vue-cli 3.0 安装

  1、安装 node ,node版本最好是在10.0.0以上;

  2、npm i @vue/cli -g  全局安装vue-cli 3.0 现在的一般都是在3.0以上

  3、vue create develop 创建我们的工程包

  4、此时选择Manually, 进行自己编辑设置下载包

  

 5、选择项目需要的一些特性(此处我们选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试,暂时不考虑端到端测试(E2E Testing))

  

  6、选择CSS预处理器语言,此处选择LESS

  

  7、选择ESLint的代码规范,此处使用 Standard代码规范

      

  8、选择何时进行代码检测,此处选择在保存时进行检测

  

  9、选择单元测试解决方案,此处选择 Jest

  

  10、选择 Babel、PostCSS、ESLint等配置文件存放位置,此处选择单独保存在各自的配置文件中

  

  11 、配置完成后等待Vue-cli完成初始化

  

  12、此时项目目录中要安装  npm i  vue-amap vue-axios  vuex

  13、启动项目: npm install     -------下载依赖包

          npm  run serve  -----启动项目

          npm  run  build  -----编译文件

   14、package.json

  

  15、vuex  使用

            

   models使用:  

    自己一些小的见解,希望对您有所帮助,喜欢就点个赞。Vue 面向对象太彻底,完全一套面向对象东西,学习挺简单的,比较react 来说比较简单,更类似与小程序。   

                        

 


猜你喜欢

转载自www.cnblogs.com/GongYaLei/p/10159508.html