时间戳

首页 > 技术文章 > Vue前端基础学习

Vue前端基础学习

ranylra 2021-06-28 23:31 原文

vue-cli

vue-cli 官方提供的一个脚手架（预先定义好的目录结构及基础代码，咱们在创建Maven项目的时可以选择创建一个骨架项目，这个骨架项目就是脚手架），用于快速生成一个vue项目模板

主要功能

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

环境准备

  • Node.js
  • git

安装vue-cli

  • 安装Node.js

官网安装地址：https://nodejs.org/zh-cn/
验证是否安装成功，在cmd输入： node-v

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

安装vue-cli

npm install -g @vue/cli

验证是否安装成功

vue list

创建一个简单的demo

在桌面创建一个目录，然后cd进入到该目录输入：
**vue init webpack firstvue(项目名称) **
然后回车4次，n，n，n，n，No，I will handle that myself
​

cd firstvue
**npm install **
npm run dev

目录结构

build 项目构建(webpack)相关代码
config 配置目录，包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
  • assets: 放置一些图片，如logo等。
  • components: 目录里面放了一个组件文件，可以不用。
  • App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
  • main.js: 项目的核心文件。
    |
    | static | 静态资源目录，如图片、字体等。 |
    | test | 初始测试目录，可删除 |
    | .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
    | index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
    | package.json | 项目配置文件。 |
    | README.md | 项目的说明文档，markdown 格式 |

Vue基础语法

条件渲染

  1. 条件判断语句
  • v-if
  • v-else
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1 v-if="awesome">Vue is awesome</h1>
        <h1 v-else>Oh no

推荐阅读