zoukankan      html  css  js  c++  java
  • 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 来说比较简单,更类似与小程序。   

                            

     


  • 相关阅读:
    ASP.net实现WEB站点的后台定时任务[转]
    個人所得稅計算
    當VS2005 遇上 LINQ[转]
    NBearV3中文教程总目录
    C#开源框架
    excel 不能使用对象链接和嵌入的错误
    PetShop 学习
    ADHelper类与扩展应用
    (javascript,treeview)treeview通过checkbox来进行全选单选
    (javascript)动态添加的控件如何设置其属性
  • 原文地址:https://www.cnblogs.com/GongYaLei/p/10159508.html
Copyright © 2011-2022 走看看