vue知识点--vue脚手架

一、vue脚手架安装

1、安装

npm i @vue/cli -g

2、创建vue项目 

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

 二、vue脚手架项目目录结构

（1）myvue文件夹

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

（2）src文件夹

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

（3）.vue 结构 

• template 组件

         template有且只有一个子节点

<template>
    <div>
        <h1>你好啊</h1>
</div>
</template>

•  script  逻辑

         data用函数的形式返回一个对象        

export default {
        data(){
            return{
                msg:'vue-脚手架写大项目'
            }
        }
    }

•  style  样式

         定义样式

<style scoped="scoped">
  .green{background-color: greenyellow;color: #fff;}
</style>

       通过scoped限定样式使用范围在本组件中

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