Vue脚手架
安装Vue脚手架:
在cmd中安装(输入):npm install -g @vue/cli
如果下载慢或下载不了,可以安装(cmd输入)淘宝镜像:npm config set registry https://registry.npmmirror.com
用命令创建Vue项目
在要创建的vue项目的文件夹里输入 cmd 回车
创建项目:“vue create 项目名”
注意:项目名不能带大写字母, 中文和特殊符号或者和下载的包依赖名称相同
可以选vue2或vue3
进入脚手架项目下, 启动内置的热更新本地服务器 : npm run serve
创建的文件结构
hello-vue # 项目目录
├── node_modules # 项目依赖的第三方包
├── public # 静态文件目录
├── favicon.ico# 浏览器小图标
├── index.html # 单页面的html文件(网页浏览的是它)
├── src # 业务文件夹
├── assets # 静态资源
└── logo.png # vue的logo图片
├── components # 组件目录
└── HelloWorld.vue # 欢迎页面vue代码文件
├── App.vue # 整个应用的根组件
├── main.js # 入口js文件
├── .gitignore # git提交忽略配置
├── babel.config.js # babel配置文件--babel是一个JS编译器,兼容低版本浏览器,引入babel,将es6转为es5
├── jsconfig.json #如果想要更改默认的webpack配置时,可以通过jsconfig.json文件
├── package.json # 依赖包列表
├── README.md # 项目说明
├── packge-lock.json # 项目包版本锁定
├── vue.config.js #vue文件编译时的配置文件
assets和public目录的区别:
assets和public两个目录都可以用来放置静态资源,通常将外部引入的第三方的文件放在public中,自己的文件放在assets中。
1、public文件夹
(1)路径设置时无需添加 /public,默认加载 public 文件夹下的文件
(2)public文件夹下的资源会直接编译,而不经过 webpack
2、assets文件夹
(1)assets目录中的文件会被webpack处理解析为模块依赖
(2)大多数用来存放js、css等
App.vue
<template><!-- 一个模版里面只能有一个根标签 --><div id="app"><!-- v-if控制元素的删除 --><h1 v-if="!flag">hello Vue</h1><!-- <h3 v-else-if="flag">我是h3</h3> --><h2 v-else>我else</h2><template v-if="flag"><h1>你好</h1><p>跑步</p><p>打球</p></template><!-- 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。 --><div v-show="!flag">我是v-show</div><!-- v-for的语法是item in items items是数据源(就是你要循环的数据) item 数组的每一项 --><div v-for="(item1,index) in arr">{{ item1 }}---{{ index }}</div><div v-for="(item1,index1) in arrObj"><div>{{ item1.name }}--{{ index1 }}</div><div v-for="(item2,index2) in item1.childern">{{ item2.name }}--{{ index2 }}</div></div><div v-for="(value1,name,index) in obj">{{ value1 }}--{{ name }}--{{ index }}</div></div></template><script>
// 每一个.vue文件就是一个组件后续你写的页面都是以.vue结尾的
// 根组件
// 本地图片先引入在使用
// @直接找src目录下
export default {name: 'App',data(){//data初始化数据return{flag:true,arr:['小明','小蓝','小红'],arrObj:[{name:'oppo',childern:[{name:'一加'}]},{name:'小米',childern:[{name:'红米'}]}],obj:{name:'小小',age:18}}},methods:{}}
</script><style></style>
动态绑定绑定属性
<template><!-- 一个模版里面只能有一个根标签 --><div id="app"><h1>hello Vue</h1><h3>你好</h3><a href="http://www.baidu.com">百度一下</a><div>{{ hrefSrc }}</div><!-- v-bind动态绑定属性 --><a v-bind:href="hrefSrc">动态绑定herf</a><!-- 简写为 --><a :href="hrefSrc">动态绑定herf--简写形式</a><img src="https://img2.baidu.com/it/u=3782187671,1334521936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334" alt=""><img :src="imgSrc" alt=""><img src="./assets/logo.png" alt=""><img :src="logo" alt=""><div class="box" :class="{active:!isActive}">我是box</div><div :class="obj">小蓝</div><div :class="activeClass">小明</div><div :class="!isActive?'active':''">小红</div><button @click="changeIsActive">修改</button></div>
</template><script>
// 每一个.vue文件就是一个组件后续你写的页面都是以.vue结尾的
// 根组件
// 本地图片先引入在使用
// @直接找src目录下
import logo from "@/assets/logo.png";export default {name:'App',data(){//data初始化数据return{isActive:true,activeClass:'active',obj:{active:true},logo,msg:"hello word",hrefSrc:"http://www.baidu.com",imgSrc:"https://img2.baidu.com/it/u=3782187671,1334521936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334"}},methods:{ // 方法changeIsActive(){console.log('this',this);let that = this;that.isActive = !that.isActive;}}
}
</script><style>
.box{width: 300px;height: 150px;border: 2px solid red;
}
.active{color:red
}</style>