VueCLI
安装@vue/cli
npm i -g @vue/cli
# 如果装不上
cnpm i -g @vue/cli
当我们安装了这个模块后,我们的命令行工具里就会有命令vue
如果npm太慢,则直接修改npm的相关源
npm config set registry https://registry.npm.taobao.org
yarn config set registry https://registry.npm.taobao.org
创建项目
想要创建项目需要使用vue
命令
vue create 项目名
如果不喜欢命令环境可以使用vue中的ui界面创建(不推荐)
vue ui
选择项目模板
运行命令后可以选择项目模板
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oRPd3LzB-1626276718353)(./img/Snipaste_2021-06-30_10-55-13.png)]
选择第一个模板no eslint
,如果我们对应的界面中没有第一个,则选择最后一个。把倒数第三个选项,按空格取消,然后继续按回车即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JAxUeuUC-1626276718355)(./img/Snipaste_2021-06-30_10-58-16.png)]
创建项目完成
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tfMYYygn-1626276718356)(./img/Snipaste_2021-06-30_11-00-05.png)]
运行项目
在项目中打开终端,运行命令
npm run serve
# 或者
yarn serve
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uUR9JlBh-1626276718359)(./img/Snipaste_2021-06-30_11-02-42.png)]
项目结构
- node_modules
- public
- index.html
- favicon.icon
- src 这个是未来我们会修改代码的地方
- assets 静态资源存放的位置
- components 组件存放的位置
- App.vue 入口组件
- main.js 入口文件
组件
vuecli创建的项目中,组件是一个又一个的.vue
文件,默认VSCode不支持vue文件,因此安装一个插件vetur
vue中的组件就是一个.vue文件
以前的组件
const Component = {
template: `
<div></div>
`,
data () {
return {}
},
props: {},
methods: {},
computed: {},
filters: {},
created () {},
mounted () {}
}
现在的组件 .vue组件
<template>
<div></div>
</template>
<script>
// export default 就是模块导出 意思就是把这个组件给导出了 未来在其他组件中可以通过import的方式导入
export default {
data () {
return {}
},
props: {},
methods: {},
computed: {},
filters: {},
created () {},
mounted () {}
}
</script>
<style>
/* 组件中的样式 */
</style>
创建组件
在components中新建文件组件名.vue
文件,在文件中输入vue
快速创建文件结构
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
组件的使用
组件在创建时使用了export default进行了导出操作,我们如果想使用组件,则在要使用组件的父组件中导入对应的组件
<template>
<div id="app">
<!-- 3 在template中使用组件标签 -->
<House></House>
</div>
</template>
<script>
// 1 导入组件 import 自定义组件名(尽量和组件的文件夹名字相同) from '文件路径'
import House from './components/Hose.vue'
export default {
name: 'App',
// 2 注册组件
components: {
// House: House
House
}
}
</script>
<style>
</style>