Vue学习历程记录

CSDN话题挑战赛第1期
活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f

参赛话题：前端学习记录
话题描述：记录前端学习过程中的某个知识点、解决方案等等

Vue简介

 Vue(/vju/，类似view)是一套用于构建用户界面的渐进式js框架。Vue3.x发布于2020.9.19，对vue2.x进行了优化，对TypeScript有更好支持。
 Vue官网：https://cn.vuejs.org/
Vue3.x Github地址：https://github.com/vuejs/vue-next
Vue3.x文档地址：https://v3.cn.vuejs.org/guide/introduction.html
基本实现
创建静态网页项目
 创建一个网页，通过本地js文件(vue.global.js)或cdn方式导入vue。
Staticfile： https://cdn.staticfile.org/vue/3.0.5/vue.global.js
Unpkg： https://unpkg.com/vue@next
 创建div，指定id，在div中使用变量

 用js创建Vue的App

 挂载到指定id的组件上

 浏览器中测试

Node.js

 Node.js就是运行在服务端的JavaScript。是基于Chrome JavaScript运行时建立的一个平台。是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，执行Javascript的速度快，性能好。
 前端程序员想创建自己的服务，Node.js是一个非常好的选择。后端程序员，想部署高性能的服务，学习Node.js也是一个非常好的选择。
安装Node.js
 验证是否安装node.js。 用命令 > node -v
 下载地址为：https://nodejs.org/en/download/。 （14.17.1版包含npm的6.14.13）
历史版本下载地址：https://nodejs.org/dist/ 或 https://nodejs.org/en/download/releases/
注意：Linux 安装 Node.js 需要安装Python 2.6或2.7，不建议安装Python 3.0以上版本。

 将文件解压到要安装的位置，并新建两个目录
node_global目录存放npm全局安装的位置
node_cache目录存放npm缓存的路径
 将node.exe所在的目录添加到path环境变量
 命令行中测试是否安装成功
node -v
npm -v
 配置global全局安装位置，cache缓存路径
npm config set prefix “F:\Program Files\node-v8.11.3-win-x64\node_global”
npm config set cache “F:\Program Files\node-v8.11.3-win-x64\node_cache”
 安装webpack(用来打包的模块)。
npm install webpack -g
将node_global目录加入path环境变量
NPM介绍
 NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，新版的nodejs已经集成了npm。
 可以通过npm命令来升级npm到新版本
npm install npm -g
国内直接使用npm非常慢，推荐使用淘宝NPM镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org
或：npm config set registry https://registry.npm.taobao.org
 npm包安装分为本地安装（local）、全局安装（global）两种
本地安装：将安装包放在node_modules目录下。可以通过require()来引入的。
全局安装：将安装包放在node的安装目录或指定的全局目录。可以直接在命令行使用。
 NPM常用命令，在npmjs.org/doc/查看官方文档，使用npm help可查看所有命令。
npm help 可查看某条命令的详细帮助，例如npm help install。
npm install . -g可先在本地安装当前命令行程序，可用于发布前的本地测试。
npm update 可以把当前目录下的对应模块更新至最新版本。
npm update -g可以把全局安装的对应命令行程序更新至最新版。
npm cache clear可以清空NPM本地缓存。 可以加参数
npm unpublish @可以撤销发布自己发布过的某个版本代码。
 可以通过npm安装yarn
npm install yarn@latest -g

安装脚手架
 安装脚手架前需安装nodejs。脚手架工具可以快速搭建vue项目，官方提供了Vue-cli和Vite两个脚手架
Vue-cli地址：https://cli.vuejs.org/
Vite地址：https://github.com/vitejs/vite
 安装Vue-cli脚手架，Vue-cli是官方提供的命令行工具，可用于快速搭建大型单页应用。
yarn global add @vue/cli
or
npm install -g @vue/cli
or
cnpm install -g @vue/cli
 重新开启命令行窗口，查看版本
vue --version
创建项目
 通过Vue-cli创建项目，首先在命令行中进入要创建项目的目录下
 vue create 项目名 # 创建项目

 yarn serve （或 npm run serve）# 运行项目

 浏览器中浏览。注：也可在vscode中打开项目，运行

 Vite脚手架创建项目(推荐)，Vite是一个web项目构建工具，可以实现快速的冷服务器启动。
 用npm创建
npm init vite-app 项目名 #创建项目 ， 或 npm init @vitejs/app 项目名

?cd 项目目录
npm install # 安装项目
npm run dev # 运行项目
 用yarn创建
yarn create vite-app 项目名 #创建项目 ， 或 yarn create @vitejs/app 项目名
cd 项目目录
yarn # 安装项目
yarn dev #运行项目

模板语法

 Vue中的模板文件都是由模板、业务逻辑

绑定
 文本数据绑定
 首先清空App.vue，获得一个纯净的环境。
 在App.vue文件中的模板上可以绑定业务逻辑中的数据

 绑定的数据可以是对象
 可以给模板内容添加样式
 html数据绑定，指将值包含html内容的属性绑定到模板，使用{{}}不能实现，用v-html属性
模板：
 v-bind绑定属性，指将属性值绑定到标签的属性值上。

 v-bind绑定动态属性，指要绑定的参数和参数值都是动态获取的。语法v-bind:[attributeName]

CSDN话题挑战赛第1期
活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f