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 来说比较简单,更类似与小程序。