1.安装
安装vue脚手架 :npm i @vue/cli -g
2.创建vue项目
cd / 切换到根目录
创建一个叫myvue的项目:vue create myvue
通过箭头选择vue2
出现蓝色的字,代表创建项目成功
切换到项目目录:cd myvue
运行项目:npm run serve
出现local和network项目启动成功
项目目录结构
node_modules 插件安装目录
public 公用文件和模板目录
*src 源文件目录
.gitignore 上传到服务忽略配置
bable.config.js ES6转ES5配置
jsconfig.json js配置
*package.json 包管理(项目管理目录)
package-lock.json 插件安装地址缓存
READMEmd 项目说明文件
vue.config.js vue项目配置文件
src项目的源文件
--assets 资源目录
----logo.png logo
--components 存储自定义组件目录
----HelloWorld.vue 默认组件
--*App.vue vue根组件
--main.js 项目入口文件
3.vue
template 模板
template有且只有一个子节点
<template>
<div>
<p>内容</p>
</div>
</template>
script 逻辑
data必须是函数返回一个值
export default{
data(){
return {
msg:"脚手架写大项目"
}
}
}
vue 的指令连接了template和script
<p class="green">{{msg}}</p>
<input v-model="msg"/>
style 样式
定义样式
<style>
.green{background-color:"green";color:"#fff";}
</style>
可以通过scoped限定样式使用范围在本组件
<style scoped="scoped"></style>
<style scoped></style>