脚手架搭建项目（详解)

2024-05-30 12:47:24

一、什么是脚手架？

在vue中，脚手架使用的是，vue-cli这个技术
脚手架，就是一个今后所写项目的一个基本的空框架，这个空框架中包含了与项目业务无关的空框框

二、安装步骤

1、电脑上必须有node.js 建议安装淘宝镜像。
node下载地址：https://nodejs.org/zh-cn/ （安装成功后可使用 node -v 查看是否安装成功）。
淘宝镜像安装：npm config set registry https://registry.npm.taobao.org （使用命令行安装）。
2、全局安装
npm install -g @vue/cli
3、查看安装之后的脚手架版本
vue --version
4、把cmd cd到你要创建项目的路径下
5、创建项目 vue create 项目名
6、把路径cd到你创建的项目下
7、启动项目 npm run serve

现在一个空的项目模板就已经搭建好了

三、.vue文件----单文件组件

在一个.vue文件中有三个部分
1.template html部分写在template中
2.script 就是用来写js相关的代码 data methods watch computed等等
3.style 就是用来编写组件的样式

四、开始使用

1、点开src文件夹找到components文件夹删除其中的helloword.vue
2、在components文件夹中创建一个属于我们自己的.vue文件在其中把template script style补齐

<template><div></div>
</template>
<script>
export default {}
</script>
<style>
</style>

3.到app.vue（所有组件的老大不能删）中修改原有的配置

<template><div id="app"></div>
</template>
<script>
// 1.修改下面的引用 把原来的helloword    路径改成我们自己创建的
// 首字母必须大写
import （首字母大写）*** from './components/***.vue'export default {name: 'App',components: {// 2。修改引用的名字为我们创建的***}
}
</script><style></style>

创建

1.需要在components文件家中创建一个.vue文件并写入内容

2.使用组件

（1）引用 import 首字母大写 from “引用文件的路径”

（2）调用需要与data methods watch 等同级位置使用components来进行表示

语法：

                    components:{                       给引用的组件起个名字:  你要用的组件                    }

（3）使用把组件当做标签在template中进行使用

脚手架搭建项目（详解)相关推荐

php强类型 vscode,VSCode + WSL 2 + Ruby环境搭建图文详解
vscode配置ruby开发环境 vscode近年来发展迅速,几乎在3年之间就抢占了原来vim.sublime text的很多份额,犹记得在2015-2016年的时候,ruby推荐的开发环境基本上都是 ...
Linux系统下SVN服务器的搭建过程详解 UpJ}s7+
Linux系统下SVN服务器的搭建过程详解 UpJ}s7+ 1 环境: 服务器放在redhatAS4.0上,客户端在windows 2000. k_lb"5z Z]jSq@%1H* ...
openstack ice自定义调度算法项目详解（horizon、novaclient、api、scheduler、db、自定义数据库）
原文转自:openstack ice自定义调度算法项目详解(horizon.novaclient.api.scheduler.db.自定义数据库) 第一部分:页面层即horizon与novaclien ...
国外问卷调查项目详解(真正的保姆级教程)
大家好,我是小飞匠,也聊了不少关于国外问卷调查项目的话题,但是不少朋友对于国外问卷调查还是不太了解,今天来做一个国外问卷调查项目详解(全网最全最细致的教程),如果能够给到大家一点点帮助那也 ...
VueCli脚手架的使用详解
VueCli脚手架的使用详解介绍 VueCLI 脚手架,可以把许多项目通用的依赖包(vue.webpack.路由.vuex.less编译器等等) 和通用的配置都给安装配置好,使得开发者可以把全部的 ...
西门子smart200能用C语言吗,【项目详解】200SMART+V20在收卷机械上的应用
原标题:[项目详解]200SMART+V20在收卷机械上的应用 JZGKCHINA 一.项目介绍 1.行业背景: 目前国内塑料机械企业加大了对新兴市场的开拓,国际知名度进一步扩大,市场竞争力也进一步提 ...
RPA Developer UIPath Certificate,细说uipath认证学习，Online Quiz和Practical Exam项目详解
RPA Developer UIPath Certificate,细说uipath认证学习,Online Quiz和Practical Exam项目详解 UIPath,RPA里算是比较简单易操作的一款 ...
Gitlab搭建教程详解
Gitlab搭建教程详解拟制人: 完成日期:2017-05-11 审核人: 审核日期: 修改记录名称版本号拟制人/ 修改人拟制/修改日期更改理由主要更改内容 (写要点即可) ...
es springboot 不设置id_es(elasticsearch)整合SpringCloud（SpringBoot）搭建教程详解
注意:适用于springboot或者springcloud框架 1.首先下载相关文件 2.然后需要去启动相关的启动文件 3.导入相关jar包(如果有相关的依赖包不需要导入)以及配置配置文件,并且写一个 ...
[转]大数据环境搭建步骤详解（Hadoop，Hive，Zookeeper，Kafka，Flume，Hbase，Spark等安装与配置）
大数据环境安装和配置(Hadoop2.7.7,Hive2.3.4,Zookeeper3.4.10,Kafka2.1.0,Flume1.8.0,Hbase2.1.1,Spark2.4.0等) 系统说明 ...

最新文章

热门文章