Vue2.0-vue-cli & vue组件

最新推荐文章于 2024-09-24 10:01:00 发布

04160708

最新推荐文章于 2024-09-24 10:01:00 发布

阅读量569

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_64450294/article/details/127988051

版权

基于 vue-cli 快速生成工程化的vue项目

【Vue-cli】

（一）什么是单页面应用程序

单页面应用程序。指的是一个web网站中只有唯一的一个html页面，所有的功能与交互都在这唯一的一个页面里完成。

（二）什么是vue-cli

vue-cli是vue.js开发的标准工具。

简化了程序员基于webpack创建工程化的vue项目的过程。

即程序员可以专注在撰写应用上，不必花费好几天去纠结webpack配置的问题。帮程序员快速创建一个vue项目

中国官网：https://cli.vuejs.org/zh/

（三）安装和使用

安装

在终端运行 npm install -g @vue/cli

vue-cli是npm 上的一个 全局包，使用npm install 命令，即可方便的把它女装到自己的电脑上。

-g ：通过-g安装的都是全局包。

检测是否安装完毕：终端输入 vue -V ，出现版本号即安装成功。

基于 vue-cli 快速生成工程化的vue项目

终端 vue create 项目名

在进入目标文件夹之后在地址栏里面点击输入cmd，进入此文件夹下的终端。

输入vue create 项目名，回车

按照视频要求进行选择配置：

最终写一下保存设置的名字。我写的就是day3_01

最后回车等待建立

上面蓝色的提示，是在提示我们怎么把项目跑起来。

项目跑起来

根据上面提示在终端输入。窗口关掉即停止项目

cd demo-first

npm run serve

获得项目最外层基础结构

src 放源代码

· vue项目中src目录的构成：

assets 文件夹：存放项目中用到的静态资源文件（如css样式表、图片资源）

components 文件夹： 程序员封装的、可复用的组件，都要放到该目录下

main.js 是项目的入口文件，整个项目的运行，要先执行 main.js

App.vue 是项目的根组件……定义一些UI结构在页面上写什么结构就能看到什么结构<template></template>

（四）Vue项目的运行流程

在工程化项目中，vue要做的事情很单纯：通过main.js 把App.vue渲染到index.html 的指定区域中。

①App.vue用来编写待渲染的模板结构

②index.html中需要预留一个el区域

③main.js把App.vue渲染到了index.html所预留的区域中

关于main.js:

（五）组件的基本使用

创建一个Test.vue
- 套用模板结构填写内容

再在main.js中修改相应的内容

补充：.$mount('#app' ) 的作用与在实例中使用 el: 是同一个效果。二选一

【Vue 组件】

（一）什么是组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护。

组件是对UI结构的复用。

（二）vue中的组件化开发

vue是一个支持组件化开发的前端框架。

vue中规定：组件的后缀名是 .vue 。之前接触到的App.vue 文件本质上就是一个vue的组件。

（三）vue组建的三个组成部分

三个组成部分

每个 .vue 组件都由3部分构成，分别是：

① template -> 组件的 模板结构

② script -> 组件的 JavaScript行为

③ style -> 组件的样式

注意：

· script当中的 export default {} 是默认导出，固定写法，不允许修改。

· .vue组件中的data 不能像之前一样，不能指向对象

· 组件中的data 必须是一个函数

组件中的data

<script>
//默认导出。这是固定写法！
export default {
    //data数据源
    data(){            
        //这个return出去的{}中，可以定义数据
        return{
            username: 'admin'
        }
    }
}
</script>

在组件中定义 methods 方法

<template>
    <button @click="changeName">点击修改用户名</button>
</template>
<script>
//默认导出。这是固定写法！
export default {
    //data数据源
    data(){
        return{
            username: 'admin'
        }
    },
    methods: {
        changeName(){
            this.username='哇哈哈'
        }
    }
}
</script>

实现效果

同理，要定义侦听器、过滤器、计算属性，则就与methods平级即可。
只有一个特殊，就是data函数

export default {
    //data数据源
    data(){
        return{
            username: 'admin'
        }
    },
    methods: {
        changeName(){
            this.username='哇哈哈'
        }
    },
    watch:{},  //当前组件中的侦听器
    computed:{}, //当前组件中的计算属性
    filters:{}  //当前组件中的过滤器
}