1.脚手架创建
在电脑上安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
(1)全局下载vue脚手架: npm install -g @vue/cli (只需要执行一次 今后就不用执行了)
(2)vue --version查看版本
(3)cd 到你要创建的项目文件夹下
(4)vue create 你的项目名
(5)下载好项目之后 cd到你的项目名下
(6)npm run serve 启动项目
单文件组件
就是以.vue结尾的文件 (template是写html的 scripte是写js的 style是写css的)
当我们拿到一个空项目之后需要删除一些默认的内容
(1)去components文件夹下 删除HelloWord.vue文件
(2)来到app.vue中删除对于helloword文件的引用 调用 使用
组件
就是用来封装可以重复使用内容 组件的本质就是自定以标签
那我怎么写组件?
组件写在components文件夹下 并且以.vue结尾 并且写上templkate script style
组件怎么使用?
要使用组件分为三步
1.引用
// import 给你引得这个文件起个名字方便使用 from 你引用文件的地址
import Com from "./components/com.vue"
2.调用
需要在components:{
你引用组件的名字
}
3.使用
<关键字/>
<关键字></关键字>
组件的坑1
组件的template中如果有多行标签 必须必须必须要有一个父节点包裹
组件的坑2
我想在组件中使用data模型数据怎么办?
如果现在。vue文件中写data模型数据语法有所变化
data(){
return {
变量名:变量值
}
}
基本组件中使用的之前学习到的vue属性 处理data以外别的内容使用方式全部一模一样
组件中css style部分
scoped 当前样式仅对当前组件生效
父子组件----就是组件与组件之间的嵌套关系
父子组件的作用域
组件与组件之间是有用完成的独立的作用域 所以组件与组件之间数据不互通不共享
但是数据可以用其他一些方式进行传递