vue从入门到放弃

Posted 2022-12-03 胡金水

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue从入门到放弃相关的知识，希望对你有一定的参考价值。

vue介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。【Vue的api文档】

什么是渐进式框架？

渐进式：一步一步，不是说你必须一次把所有的东西都用上
自底向上设计：是一种设计程序的过程和方法，就是先编写出基础程序段，然后再逐步扩大规
模、补充和升级某些功能，实际上是一种自底向上构造程序的过程。

最核心的是视图层渲染，然后往外是组件机制，在此基础上再加入路由机制，再加入状态管理，最外层是构建工具，vue和react都是如此。

优点

组件化开发
单页面路由
丰富的Api方法
双向的数据绑定
单向数据流
易于结合其他第三库
最适合于构建视图项目，移动端项目

缺点

生态系统不够完善
可扩展性稍差

vue 目录结构：

目录结构
├── build/                      # webpack 编译任务配置文件: 开发环境与生产环境
│   └── ...
├── config/                     
│   ├── index.js                # 项目核心配置
│   └── ...
├ ── node_module/               #项目中安装的依赖模块
   ── src/
│   ├── main.js                 # 程序入口文件
│   ├── App.vue                 # 程序入口vue组件
│   ├── components/             # 组件
│   │   └── ...
│   └── assets/                 # 资源文件夹，一般放一些静态资源文件
│       └── ...
├── static/                     # 纯静态资源 (直接拷贝到dist/static/里面)
├── .babelrc                    # babel 配置文件
├── .editorconfig               # 编辑配置文件
├── .gitignore                  # 用来过滤一些版本控制的文件，比如node_modules文件夹 
├── index.html                  # index.html 入口模板文件
└── package.json                # 项目文件，记载着一些命令和依赖还有简要的项目描述信息 
└── README.md                   #介绍自己这个项目的，可参照github上star多的项目。
build/

安装命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

vue2.0创建项目命令：

(base) goldwater@hujinshui vue % cnpm install -g vue-cli
(base) goldwater@hujinshui vue % vue init webpack vue2.0-demo

? Project name vue2.0-demo # 项目名称
? Project description A Vue.js project # 项目描述
? Author your name # 开发者名字
? Vue build standalone # vue 编译模式
? Install vue-router? Yes # 是否安装vue 路由
? Use ESLint to lint your code? No # 是否使用vue代码检测插件
? Set up unit tests No # 是否设置单元测试
? Setup e2e tests with Nightwatch? No # 是否使用自动化测试插件Nightwatch
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) # 使用哪个管理插件包

❯ Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself
  To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

# Project initialization finished!
# ========================

To get started:

  cd vue2.0-demo
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

(base) goldwater@hujinshui vue % cd vue2.0-demo
(base) goldwater@hujinshui vue2.0-demo % npm run dev

vue3.0创建项目命令：

(base) goldwater@hujinshui vue % cnpm install -g @vue/cli
(base) goldwater@hujinshui vue % vue create vue3.0-demo-1
Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint) # 默认使用vue3的配置
  Default (Vue 3) ([Vue 3] babel, eslint) # 默认使用vue3的配置
  Manually select features # 自定义配置
  # 上述选择后，等待安装即可
  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

added 1236 packages in 20s
🚀  Invoking generators...
📦  Installing additional dependencies...


added 3 packages in 2s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue3.0-demo-1.
👉  Get started with the following commands:

 $ cd vue3.0-demo-1
 $ npm run serve

(base) goldwater@hujinshui vue % cd vue3.0-demo-1
(base) goldwater@hujinshui vue3.0-demo-1 % npm run serve