vue-0001基础信息

发表于 2022-01-06 更新于 2022-08-18 阅读次数：本文字数： 2.6k 阅读时长 ≈ 2 分钟

vue全家桶都有什么

全家桶，对于开发一个完整的中大型单页面应用项目所必须的插件和框架

vue-cli

vue-cli也叫脚手架，官方定义为Vue.js 开发的标准工具

// vue3.0
npm install -g @vue/cli

vueRouter

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌
包含的功能有：

1）嵌套的路由/视图表
2）模块化的、基于组件的路由配置
3）路由参数、查询、通配符
4）基于 Vue.js 过渡系统的视图过渡效果
5）细粒度的导航控制
6）带有自动激活的 CSS class 的链接
7）HTML5 历史模式或 hash 模式，在 IE9 中自动降级
8）自定义的滚动条行为

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
特性
1）从浏览器中创建 XMLHttpRequests
2）从 node.js 创建 http 请求
3）支持 Promise API
4）拦截请求和响应
5）转换请求数据和响应数据
6）取消请求
7）自动转换 JSON 数据
8）客户端支持防御 XSRF

搭配UI框架

如：iview、vant、elementUI
iview 一套基于 Vue的高质量UI 组件库(分为小程序和pc端等不同版本)；
vant 轻量、可靠的移动端 Vue 组件库,是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库,旨在更快、更简单地开发基于 Vue 的美观易用的移动站点。
Ant Design Vue 是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。
elementUI 是基于 Vue 2.0 桌面端中后台组件库。

生命周期图示

学习时可以使用最新版本,生产环境需要明确的版本号

<script src="https://unpkg.com/vue@next"></script>

npm
在用 Vue 构建大型应用时推荐使用 npm 安装[1] 。npm 能很好地和诸如 webpack 或 Rollup 模块打包器配合使用。

# 最新稳定版
$ npm install vue@next

Browser devtools extension for debugging Vue.js applications.
https://github.com/vuejs/devtools#vue-devtools

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架

npm install -g @vue/cli

使用 VSCode 做开发工具

安装 typescript, vue3 使用 typescript 重构的

npm i -g typescript

查看版本

package.json 里面 “dependencies” 字段有 vue 版本

插件安装

浏览器至少安装了稳定版的 Vue 开发扩展；如果不支持 vue3 就是用测试版
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=zh-CN

语法高亮 - 安装Vetur插件
ESLint是检查代码规范和语法错误的
Prettier则是格式化代码的插件
Bookmarks //ctrl+alt+k 标记位置，ctrl+alt+l 跳转标记位置

配置ESLint

项目根目录下看看有没有 .eslintrc.js 这个文件，如果没有就创建一个。
在 package.json里查找有无eslintConfig区段，如果有将其内容复制到 .eslintrc.js 并删除eslintConfig区段。

// .eslintrc.js 内容大致如下
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'plugin:prettier/recommended', // 添加 prettier 插件, 注意需要放到 plugin 最后一个
    '@vue/prettier',
  ],
  // rules 里面的内容根据团队风格统一配置
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

配置Prettier

在项目根目录下创建 .prettierrc.js
配置在使用Prettier格式化的时候会自动把双引号转成单引号，并且移除句尾的分号

module.exports = {
  singleQuote: true,  // 使用单引号
  semi: false  // 句尾不使用分号
}

关闭 Vetur 的模板校验功能，因为我们将使用 ESLint + Prettier 来实现。
打开 Settings 在 User 选项卡下搜索 vetur.validation.template ，如图所示取消勾选即可。

ctrl+shift+p 输入 settings 找到 user settings 不带 json 字样的，搜索 vetur.validation.template 去掉勾选

ESLint增加vue格式支持
在 User 选项卡下搜索 eslint.validate ，点击 Edit in settings.json

新建文档 index.html 输入 ! 然后选择提示项目就会自动生成一个 html 框架代码

方法只要重新渲染就会被调用，而计算属性不会，计算属性只有在依赖的内容发生改变时才会变化