VUE 学习以及node.js安装

VUE学习

官方文档： https://cn.vuejs.org/
选项式风格：

组合式风格：

Node.js 16安装

1. 下载安装包

https://nodejs.org/zh-cn/download/

https://nodejs.org/en/

根据自己电脑系统及位数选择，我的电脑是Windows系统、64位、想下载稳定版的.msi（LTS为长期稳定版）这里选择windows64位.msi格式安装包。

官网下载如图所示：

安装过程如有问题请观看：

访问：https://blog.csdn.net/weixin_52799373/article/details/125718587?spm=1001.2014.3001.5502

2. 安装
   
   
   
   之后一直next，默认安装就好。
   
   
3. 配置环境变量

node -v 查看node的版本
npm -v 查看npm的版本(新版的node安装自带安装npm)

配置全局安装的模块路径和缓存路径
在nodejs根目录,创建node_global，node_cache文件夹

管理员身份- 打开CMD，配置路径：（注意一定要管理员身份运行CMD！！！路径改成你自己的路径，不要无脑复制！！！）

npm config set prefix "D:\software\Nodejs\node_global"
npm config set cache "D:\software\Nodejs\node_cache"

找到电脑环境变量位置：
win10&win11：右键此电脑——属性——高级系统设置——高级——环境变量

4. 测试效果

npm install express -g
要用管理员权限打开CMD

5. 全局配置淘宝镜像

npm config set registry https://registry.npm.taobao.org
# 安装 cpm （按需安装）
npm install -g cnpm

查看配置：npm config ls

全局安装webpack

npm install webpack -g

创建vue项目

在构建项目的目录地址栏直接输入cmd,按回车即注意一定是管理员运行条件下或此项目都所有权限都可以访问。

创建新项目
npm init vue@latest

输入新项目名称为 vue-base 注意不能有大写字母
之后全部回车

此外应将缓存地点设置为全局可见

之后输入：

cd vue-base
```![在这里插入图片描述](https://img-blog.csdnimg.cn/d6caa1d5b119487c8612beb876e07844.png)
输入**cnpm install ** cnpm比 npm 快

输入

npm  run dev  #运行此项目

复制粘贴此url: http://localhost:5173/出现下图所示说明创建成功。

当有如下问题时：

最近拉取vue新代码更新依赖时，更新总是报错getaddrinfo ENOTFOUND server…请看下面帖子“运行npm报错：npm ERR! errno ETIMEDOUTnpm ERR! network request to https://registry.npm的解决方案”

开发环境及项目目录

VScode + Volar扩展

模板语法

前端修改后则各个语法都要保存一下再刷新，否则将报错。

文本插值

<template>
  <h3>模板语法</h3>
  <p>{{ msg }}</p>
</template>

<script >
export default{
  data(){

    return{
      msg:"神奇的语法"
    }
  }

}

</script>

删去main中css样式后为：

结果如图所示

属性绑定

<template>
  <div v-bind:id="dynamicId" v-bind:class="msg">测试</div>


</template>

<script >

export default{
  data(){
    return{
      msg:"active",
      dynamicId:"appID"

    }
  }

}

</script>

结果为：

1. 由图可看到网页div中id与class通过v-bind传递。
2. v-bind经常用因此可以删除简写，简写代码如下：

  <div :id="dynamicId" :class="msg">测试</div>

3. 可传递一个对象代码如下结果与单独传递id,class结果一致。

<template>
  <!-- <div :id="dynamicId" :class="msg">测试</div> -->

  <div v-bind="ObjectofAttrs">测试</div>
</template>

<script >

export default{
  data(){
    return{
      // msg:"active",
      // dynamicId:"appID"
      ObjectofAttrs:{
        msg:"active",
      dynamicId:"appID"
      }

    }
  }

}

</script>

条件渲染

在vue中提供条件渲染，这类似于Javascript的条件判断。
v-if
v-else
v-else if
v-show