vue脚手架

🍓vue脚手架

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统

通过 @vue/cli 搭建交互式的项目脚手架。

---

🍓 安装vue脚手架

npm i @vue/cli -g

🐇步骤如下:

🐇vue create myvue   创建一个叫myvue的项目

 🐇

 🐇🐇🐇🐇🐇🐇🐇🐇🐇🐇🐇🐇🐇🐇🐇🐇🐇🐇🐇🐇🐇

 复制连接到浏览器

就会看到运行成功的样子 

 

🐇导入项目到代码编辑器中,看一下目录结构

 

---

🍓项目目录结构

• node_modules  插件安装目录
• *src  源文件目录
• .gitignore  上传到服务器忽略配置
• babel.config.js  ES6转ES5配置
• jsconfig.json  js配置
• *package.json  包管理(项目管理目录)
• package-lock.json  插件安装地址缓存
• README.md项目说明文件vue.config.js vue项目配置文件

🐇src项目的源文件

• --assets资源目录
• ----logo.png logo
• --components存储自定义组件目录
• ----HelloWorld.vue默认组件
• --*App.vue vue根组件
• --main.js项目入口文件

 

🍓vue的组成

🐇在脚手架里面, .vue是一个文件也是一个组件

🐇.vue由三个部分组成:template,script,style

template  有且只有一个子节点
<template>
     <div>
         <p>
         </p>
      </div>
</template>

 🐇template视图显示部分:只能有一个子节点

🐇 script业务逻辑数据存储

<script>
	export default {
		data() {
			return {
				msg: "vue-脚手架写大项目"
			}
		}
	}
	// export 导出  default 默认  data 数据  scoped作用域
	// data(){} 是data:function(){} 的简写
</script>

🐇 data 必须是函数返回一个值

🐇  vue的指令连接了 template和script

<p class="green">{{msg}}</p>
<input type="text" v-model="msg">

🐇 style 展示样式

🐇 适应scoped实现样式隔离(style中的样式只在当前组件启用)

    .green{
        background-color: green;
        color: #fff;
    }

🐇 可以通过scoped限定样式使用范围在本组件

<style scoped="scoped"></style>
<style scoped></style>