vue入门级学习

vue3官网
https://cn.vuejs.org/
vue2官网
https://v2.cn.vuejs.org/

准备工作

vscode插件

:::info
Bracket Pair Colorizer 2 花括号
Beautify 格式化
Chinese 中文简体
Vetur vue格式显示
:::

安装vue工具

npm install -g @vue/cli
vue --version

nodejs历史版本下载

https://nodejs.org/en/download/releases/

nodejs安装

环境变量

1. 在安装目录下，如 E:\toolsAz\nodejs 新建两个文件夹 node_global(全局包存放目录) 和 node_cache(缓存目录)；

2. 打开命令行工具，执行以下两句操作：

npm config set prefix “E:\toolsAz\nodejs\node_global”
npm config set cache “E:\toolsAz\nodejs\node_cache”；

3. 配置环境变量：

• NODE_PATH：E:\toolsAz\nodejs\node_modules
• 编辑用户变量的 path， E:\toolsAz\nodejs\node_global

Vue CLI#

Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链，它现在处于维护模式。我们建议使用 Vite 开始新的项目，除非你依赖特定的 Webpack 的特性。在大多数情况下，Vite 将提供更优秀的开发体验。
关于从 Vue CLI 迁移到 Vite 的资源：

• VueSchool.io 的 Vue CLI -> Vite 迁移指南
• 迁移支持工具 / 插件

这个cli打开操作：生态系统–工具链指南–向下一点就看到了
点击跳转后的网址
https://cli.vuejs.org/zh/#%E8%B5%B7%E6%AD%A5

创建vue项目

遇到的问题 ：
vue : 无法加载文件 D:\toolsAz\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本问题处理：
1、get-ExecutionPolicy
2、set-ExecutionPolicy RemoteSigned
3、get-ExecutionPolicy

vue create first-demo


npm run serve
参考连接
https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

语法

{{ message}}

    	
{{ msg }}
      
{{ baidu }}
      
{{ num * 5 }}
      
{{ num > 10 ? 5000 : 0 }}

v-bind = :

111

      2222

v-if v-else-if v-else v-show

    	
条件渲染

      测试v-if
      测试v-show


      v-if

      v-else

      v-show