Vue(一)——脚手架工具及单文件组件

最新推荐文章于 2024-04-11 07:38:43 发布

Jyann~

最新推荐文章于 2024-04-11 07:38:43 发布

阅读量234

点赞数

分类专栏：前端 Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_34569497/article/details/112769368

版权

前端同时被 2 个专栏收录

173 篇文章 14 订阅

订阅专栏

Vue

89 篇文章 7 订阅

订阅专栏

一、脚手架

Vue 提供了一个脚手架工具，帮助我们快速搭建本地项目：vue-cli

https://cli.vuejs.org/zh/

1.1安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

如果创建时报错：先分别安装Vue 和Vue-cli，再通过npm uninstall vue-cli -g删除老版本vue-cli，然后使用npm install -g @vue/cli命令安装即可

有可能是之前安装过Vue-cli导致的，所以删掉老版本后再装就可以了

1.2创建项目

vue-cli 提供了两种使用方式

命令行
UI (使用web端建立Vue项目)

# 命令行
vue create 项目名称
# UI
vue ui

运行命令以后，根据提示进行选择

- node_modules/
- public/
- src/
   - assets/
   - components/
   - app.vue
   - main.js
- ...

创建项目时解析：点击空格键选中或取消

vue ui创建项目：

vue-cli 各种执行命令，详见官网https://cli.vuejs.org/zh/guide/

启动项目：

npm run serve

在通过 http://localhost:8080/访问即可

1.3目录结构

二、单文件组件

https://cn.vuejs.org/v2/guide/single-file-components.html

细节：https://vue-loader-v14.vuejs.org/zh-cn/

vue 也是基于组件的开发模式，我们知道一个 UI 组件包含

结构（<template>）
样式（<style>）
行为（<script>）

为了能够更加方便的编写组件，vue 提供了一个特殊的组件定义文件：.vue 文件，我们也称为单文件组件。

入口文件main.js
.vue文件，浏览器不会进行解析，而是通过官方提供的vue-loader使用webpack对App.vue进行文件进行解析

2.1组成

一个单文件组件的结构、样式、行为分别通过三个标签来进行定义和划分

<html>
<script>
<style>

如果vue-demo中的App.vue文件：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Jyann~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue(一)——脚手架工具及单文件组件

一、脚手架Vue 提供了一个脚手架工具，帮助我们快速搭建本地项目：vue-clihttps://cli.vuejs.org/zh/1.1安装npm install -g @vue/cli# ORyarn global add @vue/cli1.2创建项目vue-cli 提供了两种使用方式命令行 UI# 命令行vue create 项目名称# UIvue ui运行命令以后，根据提示进行选择- node_modules/- public/- ..
复制链接

扫一扫