vue脚手架

一、安装
    

安装vue脚手架
npm i @vue/cli -g

二、创建vue项目

cd /  切换到c盘根目录
vue  create myvue创建一个叫myvue的项目
 运行项目
   cd myvue进入项目目录
   npm run serve运行项目

2.项目目录结构

node_modules 插件安装目录
public 公用文件和模板目录
*src源文件目录
.gitgore上传到服务忽略配置
bable.config.js ES6转ES5配置
jsconfig.json js配置
*package.json包管理（项目管理目录）
package-lock.json插件安装地址缓存
README.md项目说明文件
vue.config.js vue项目配置文件

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

3..vue模板开发实例

<template>
	<div>
		<h1>你好vue</h1>
		<p>1.在脚手架里面.vue是一个文件也是一个组件</p>
		<p>2..vue由三部分组成：template,script,style</p>
		<p>3.template视图显示部分：只能有一个子节点</p>
		<p>4.scri业务逻辑数据存储</p>
		<p>5.script中data用函数的形式返回一个对象</p>
		<p>6.vue指令连接script和template</p>
		<p class="green">7.style展示样式</p>
		<p>8.使用scoped实现样式隔离（style中的样式只在当前组件中使用）</p>
		<input type="text" name="" id="" v-model="msg"/>
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return {
				msg:"vue-脚手架写大项目"
			}
		}
	}
	//export导出default默认data数据
	//data(){} 是data:default(){}的简写
</script>

    template模板
        

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

    script逻辑
        

data 必须是函数返回一个值
export default {
    data(){ return {msg:"脚手架写大项目"}}
}
        vue的指令连接了 template 和script
<p class="green">{{msg}}</p>
<input v-model="msg"/>

    style样式 定义样式

<style>
     .green{  background-color:"green";color:#fff;}
</style>
        可以通过scoped限定样式使用范围在本组件(明天演示)
<style scoped="scoped"></style>
<style scoped></style>

总结

以上是对vue脚手架安装及运行实例的简单总结