vue脚手架

 安装

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

创建vue项目

• cd/        切换到C盘根目录
• vue.create myvue                创建一个myvue 的项目

运行项目

• cd myvue                进入项目目录
• npm run serve                 运行项目

vue新建包目录详情

• node_modules 插件安装目录
• public  公用文件和模板目录
• *src  源文件目录（项目的源文件）

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

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

   .vue

•  template        模板
•  script              逻辑
•  style                样式    

 template        模板 

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

 script        逻辑

data 必须是函数返回一个值
export default{
     data(){return{msg:"脚手架写大项目"}}
}   

style        样式

 vue的指令连接了template 和script
<p class="green">{{msg}}</p>
<input v-model="msg"/>
            定义样式
<style type="text/css">
    .green{
        background-color: green;
        color:#FFF;
    }

可以通过scoped限定样式使用范围在本组件（明天演示）

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

<style scoped></style>