一、vue脚手架安装
1、安装
npm i @vue/cli -g
2、创建vue项目
- cd/ 切换到c盘目录
- vue create myvue 创建一个叫myvue的项目
- cd myvue 进入项目目录
- 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>