vue-cli是vue.js开发工具,帮助程序员配置webpack
安装和使用:
安装:npm install -g @vue/cli
vue create demo-first
cd 要按安装的项目名
npm run serve
创建成功后,选择配置,最后创建出demo-first文件。
vue项目中的src目录构成:
assets文件夹:存放项目中用到的静态资源文件,例如:css样式表,图片资源
components文件夹:程序员封装的,可复用的组件,都要放到components目录下
main.js项目的入口文件
app.vue是项目的跟组件
vue组件组件的三个组成部分:
独立可重用的软件模块。
vue是一个支持组件化开发的前端框架。
vue中规定:组件的后缀名是.vue。app.vue便是vue的一个组件。
可以分为三个部分:
template,模板结构中必须只有一个根节点。
script,组件中的data必须是个函数,属性包含在return中
style
以app.vue为例:
<template> <div id="app"> <h3>{{user}}</h3> <button @click="change">修改用户名</button> </div> </template> <script> export default { name: 'app', data(){ return{ user:"lwy" } }, methods:{ change(){ console.log(this) this.user="娃哈哈" } } } </script> <style lang="less" > #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: red; margin-top: 60px; h3{ color:blue } } </style>
vue组件在被封装好之后,彼此之间是相互独立的,不存在父子关系。在使用组件的时候,根据彼此的嵌套关系,形成了父子,兄弟关系。
使用组件的三个方式:
1.使用import语法导入需要的组件。
import left from '@/components/left.vue'
2.使用components节点注册组件
export default{
components:{"left":left}}
3.以标签形式,使用注册好的组件。
<left></left>
注册全局组件:
在Vue项目中的main.js入口文件中,通过vue.component()方法,可以注册全局组件。
import Count from '@/components/Count.vue'
Vue.component('MyCount',Count)
后面直接在需要的文件中导入<MyCount></MyCount>