vue，Cli与vuex与router的使用

可乐前端

已于 2022-11-15 11:04:18 修改

阅读量311

点赞数 1

文章标签： vue.js 前端 javascript

于 2022-11-15 11:03:04 首次发布

本文链接：https://blog.csdn.net/yy020604/article/details/127861864

版权

首先来说Vue是一个渐进式的一个框架，是尤雨溪尤大人开发的；
Vue的优点：
轻巧，高性能，渐进式开发，响应式数据，组件化开发，单页面应用（SPA），虚拟DOM
Vue的缺点：
首次加载页面缓存，因为是单页面不利于seo优化
所谓渐进式开发：
我理解的就是需要什么插架（依赖），就下载什么插架，无需全部下载，就跟，jQ似的，如果你使用jQ的话，就需要下载整个文件，但是jQ又有不同，我们觉得jQ是一个库，主要适用于操作DOM的也有人说，就是框架，看自己的理解吧，其实都是可以的。
响应式数据：
说到MVVM，M:model（模型） v：view（视图） vm：viewModel（视图模型），
其实这个里面的原理就是再说双向绑定，和单项数据流/双向数据流要分开，Vue是一个单项数据流，接下来我们说一下原理，因为model模型不可以直接和view视图发生响应式数据，所以借助了vm视图模型来搭建桥梁，本质上是mvc的改进版，只不过那个时候没有赶上大前端的到来，所以就搁置了，当model中的数据发生改变，vm中的数据就会发生改变，view就会发生改变，反之view视图中的数据发生改变，vm中的数据就会发生改变，model中的数据就会发生改变，MVVM的核心思想是想让人们，只关注model的数据改变
ViewModel通常要实现一个observer观察者，当数据发生变化，可以监视到数据的变化，然后通知对应的视图发生数据更新，ViewModel也监听到数据的变化，通知数据做改动，而改变的数据的劫持方法就是object.defineproperty() 这个方法，这个数据劫持中有两种方法,getter与setter方法，当数据发生变化的时候可以通过setter来改变数据，getter来获取数据，当你有一些属性存放到data数据中你会发现，所有的属性有具备这两种方法，其实就是为了监视数据的变化情况。
单页面应用：
单页面应用就是将用户与应用程序交互时动态更新该页面的Web应用程序；
单页面应用的优点：良好的交互效果，前后端工作的分离，减轻服务器的压力
这个减轻服务器的压力其实就是在说，服务器只负责出数据，程序员拿到数据后，按组件渲染即可。
缺点：首屏加载缓慢，由于所有的东西都在这一个页面，能不加载缓慢吗
解决的方法：路由使用懒加载，css使用scss预处理器，封装axios减少http请求，图片可以使用精灵图。
组件化开发：
其实就是一个html页面，有人打开一些网站，切换页面的话人家不会刷新，其实就是单页面应用，可以去看看酷狗官网的前几个页面，点击页面看看刷新按钮会动吗，
单页面应用内部切换的就是每一个组件，每一个组件可以看做是一个方法函数，组件与组件中的数据不会相互影响，最终每一个组件都会在一个html页面展示。

那有人要问了，我为什么要学Vue，为了不被前端所淘汰，现在的前端本身就很杂学，什么都有，以前的前端没准一个后端就直接干全栈了，那时候的前端只有HTML+CSS，但是现在的前端学的东西，可远远不止这些，现在你在让后端看前端代码，他就会说你写的这个是啥，那个啥，但是也有很多厉害的后端工程师看的懂，毕竟人外有人，天外有天。
那么今天我们来说一下，Vue的三件套，Vue的路由，Vue的脚手架CLI，以及Vue的状态管理器Vuex
查看脚手架的官方文档：https://v2.cn.vuejs.org/在生态系统中就可以看到Vue CLI；
CLI的环境是基于node环境下，如果没有下载node的需要下载一下，下载的流程一路next，
首先我们先说脚手架，其实官方推荐我们的还是使用vite打包工具，vite比webpack的打包速度要快很多。
在下载之前我们需要配置一下淘宝镜像，否则网络如果不好的话，就容易下载到一半就报错误了，npm config set registry https://registry.npm.taobao.org，
配置完淘宝镜像可以再c盘，用户，你电脑的名称，在最下面查看是否有这个文件夹

首先全局安装CLI：打开cmd输入npm install -g @vue/cli，安装完成之后查看是否安装成功查看版本号，vue -V
在这里插入图片描述

下面我们开始创建文件：在cmd中输入命令vue create 文件名称
这个文件名称只可以用小写，可以使用底杠”_”，或者是”-”
回车后你就会发现有下面的几个东西
在这里插入图片描述

如果是一开始的话，就建议使用vue2的自动创建就好了，等把里面脚手架熟悉了，然后在手动创建就清楚了。
在这里插入图片描述
这样的话就创建成功了，然后我们找到下载的在目录下创建的CLI，

大概说一下文件分布
在这里插入图片描述

.git是gitee操作的一个链接，团队开发的时候会使用到
node_modules是我们所要的额依赖包（插件包）
Public 静态文件，项目的站点目录
Src是开发目录
assets 存放需要打包的资源 img css js 等
components 存放开发中的组件
app.vue是最大的根组件
main.js 所有文件的统一管理的文件
.gitignore git 忽略的配置文件
babel.config.js js 高级语法降级的配置文件 es7 降级浏览器支持 package.json 包管理文件 npm 安装了哪些文件都在这里记录着 package-lock.json 包版本锁定文件防止他自动升级
vue.config.js 项目配置文件

然后我们配置路由，首先也是先下载，在这个项目中打开cmd，一定是确保在你刚才下载的项目名称下，输入命令npm i vue-router@3
在这里插入图片描述

这种报错是一个版本错误
在这里插入图片描述

然后在src文件夹中创建router文件，在router文件夹中创建一个index.js文件，创建一个views文件夹然后在里面创建两个组件，注意组件名开头一定要大写，如果是两个单词拼成的那就要单词首字母大写，引入后使用的时候也需要首字母大写，如果就是引入的首字母组件名没有大写，很容易造成组件无效，就是说浏览器读取不到这是组件，会默认将它当成标签.
在这里插入图片描述