vue入门---vue脚手架

一、vue脚手架是什么

Vue脚手架是Vue官方提供的标准化开发工具(开发平台),它提供命令行和UI界面,方便创建vue工程、配置第三方依赖、编译vue工程。

二、vue脚手架怎么用

1.安装

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

 

2.创建vue项目 

 创建一个名为myvue的项目  vue create myvue

3.运行项目

 进入项目目录  cd myvue 

运行项目  npm run serve

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

（1）

• 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>你好vue</h1>
</div>
</template>

•  script  逻辑

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

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

•  style  样式

         定义样式

<style scoped="scoped">
	.pink{
		background-color:pink;
	}
</style>

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

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

<style scoped></style>