vue脚手架

一.安装

安装vue脚手架

npm @vue/cli -g

二.创建vue项目 

1.cd / 切换到根目录

2.vue create myvue 创建一个叫myvue的项目

   (1)创建文件名称

1. node_modules插件安装目录
2. public公用文件和模板目录
3. *src 源文件目录
4. .gitignore 上传到服务忽略配置
5. bable.config.js ES6转Es5配置
6. *package.json包管理(项目管理目录)
7. package-lock.json插件安装地址缓存
8. README.md项目说明文件
9. vue.config.js vue项目配置文件

   (2)src文件夹下的名称

1. src 项目的源文件
2. --assets 资源目录
3. ----logo.png logo
4. --components 存储自定义组件目录
5. ----HelloWorld.vue 默认组件
6. --*App.vue vue根组件
7. --main.js 项目入口文件

3.运行项目

        cd myvue 进入项目目录

        npm run serve  运行项目

三.app.vue

1.template 模板

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

2.script 逻辑 

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

 3.style 样式

1.自定义样式
<style>
  .green{background-color: green;color: #fff;}
</style>
2.可以通过scoped限定使用范围在本组件
<style scoped="scoped"></style>
<style scoped></style>