vue cli搭建 详细过程

安装Node.js

Node.js

在VSCode里安装插件Volar   并且我打算用谷歌浏览器，安装一个浏览器插件Vue Devtools.

在VSCode控制台命令里输入命令查看相应版本

node -v 

npm -v

进入vue cli官网

Vue CLI

 我们来先了解一下什么是VUE？

vue是一款用于构建用户界面的javascript框架；它基于html，csss,和javascript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面

MVVM工作原理

Model View ViewModel

Model:页面渲染用到的数据源

View ：页面所渲染的DOM结构

ViewModel:表示vue的实例

 当数据源变化，vm会监听到，vm会将最新的数据源自动更新页面的结构

当表单元素的值发生变化时，也会被VM监听到，VM会把变化后最新的值自动同步到Model数据源中。

Vue的组件风格书写

vue的组件可以按两种不同的风格书写

选项式API

组合式API

选项式API

使用选项式API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods和mounted

选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例

组合式API

通过组合式API,我们可以使用导入的API函数来描述组件逻辑

在单文件组件中，组合式API通常会与<script setup>搭配使用

这个setup 属性是一个标识，告诉Vue需要在编译时进行一些处理，让我们可以更简洁地使用组合式API

<script setup>中的导入和顶层变量/函数都能够在模板中直接使用

创建单页面应用程序

创建步骤

安装并执行create-vue: npm init vue@latest

选择项目功能

除了第一项 项目名称要自定义，其他选No

 输入地址，出现网页说明配置成功

 用VSCode打开刚刚创建项目

查看管件package.json文件

App.vue ：用来编写待渲染的模板结构，也成为根组件

index.html:单页面程序唯一的界面文件

main.js:项目的主入口文件，把App.vue渲染到了index.html中

vue组件的三个组成部分

每个.vue组件都由三部分构成，分别是：

template:组成的模板结构--视图

template是容器标签，只起到包裹性质的作用，他不会被渲染为真正的DOM元素

script:组件的JavaScript行为  --vue实例

style:组件的样式 --css样式