01Vue3-认识Vue

CaRuJan

已于 2023-06-06 10:08:40 修改

阅读量188

点赞数

分类专栏： Vue3 学习文章标签： vue vue.js

于 2021-04-05 20:56:42 首次发布

本文链接：https://blog.csdn.net/qq_33290233/article/details/115444802

版权

学习同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

17 篇文章 5 订阅

订阅专栏

1.Vue概述

1.1 认识Vue

Vue是一套用于构建用户界面的渐进式框架。
渐进式就跟这个图片一样，开发可以根据需求，逐渐递增所要的方式，但每个方式有不是依靠行特别强
在这里插入图片描述

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
库是一个模块，而Vue是一套架构，会基于自身特点向用户提供一套相当完整的解决方案，而且控制权在框架本身；对项目的侵入性较大，使用者要按照框架所规定的某种特定规范进行开发，项目如果需要更换框架，则需要重新架构整个项目。

1.2 Vue的两核心

响应式的数据绑定：当数据发生改变，视图可以自动更新，可以不用关心dom操作，而专心数据操作
可组合的视图组件：把视图按照功能切分成若干基本单元，组件可以一级一级组合整个应用形成倒置组件树，可维护，可重用，可测试

1.3 Vue的初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.global.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: darksalmon;
            display: none;
        }
        div.show {
            display: block;
        }
    </style>
</head>
<body>
    <div id="app">
        {{message}}
        <h2 @click="isShow()">{{title}}</h2>

        <div class="box" :class="{show}" style="color: #333; background-color: antiquewhite" :style="{width:'200px', height:h}">
            <ul>
                <li v-for="item in articles.slice(0,5)" :title="item.content">
                    <p>{{item.title}}</p>
                    <span>{{item.content}}</span>
                </li>
            </ul>
        </div>
    </div>

</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                h: '500px',
                message: 'this is a test',
                title: 'Vue demo',
                show: true,
                articles: [
                    {title:'Google',content:'Vue 的核心库只关注视图层'},
                    {title:'souhu',content:'Vue 的核心库只关注视图层'},
                    {title:'Google',content:'Vue 的核心库只关注视图层'},
                    {title:'Google',content:'Vue 的核心库只关注视图层'},
                    {title:'Google',content:'Vue 的核心库只关注视图层'},
                    {title:'Google',content:'Vue 第三方库或既有项目整合'},
                    {title:'xifang',content:'第三方库或既有项目整合'},
                    {title:'baidu',content:'第三方库或既有项目整合'},
                    {title:'baidu',content:'第三方库或既有项目整合'},
                    {title:'baidu',content:'第三方库或既有项目整合'}
                ]
            }
        },
        methods: {
            isShow() {
                this.show = !this.show;
            }
        }
    }).mount("#app")

</script>
</html>

效果
在这里插入图片描述

1.4 Vue的生命周期

在这里插入图片描述

2. Vue-CLI (Command Line Interface)

Vue-CLI 是Vue官方提供的脚手架工具
Vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
利用vue-cli脚手架来构建Vue项目需要先安装Node.js和NPM环境。

开发环境：WebStorm
命令安装：npm install -g @vue/cli
检查版本：vue --version
创建项目：vue create 项目名称
选择Vue3，默认安装插件

目录结构
在这里插入图片描述
常见项目的目录结构，如下所示：

.
|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- node_modules		   //所需要依赖资源
|-- src                              // 源码目录
|   |--  assets                   	   //存放资产文件
|   |-- components                   // vue公共组件
|   |-- router                   	//存放路由js文件，用于页面的跳转
|   |-- App.vue                        // 页面入口文件
|   |-- main.js                        // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|   |-- data                           // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息
.

文件名	说明
dist	存放使用`npm run build`打包的项目文件
node_modules	存放项目的依赖包
public	存放静态文件。里面包含了几个文件: index.html是一个模板文件
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些资源文件，比如图片、字体等资源。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件（入口文件）。
package.json	模块基本信息项目开发所需要模块，版本，项目名称
package-lock.json	是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号
babel.config.js	是一个工具链，主要用于在当前和较旧的浏览器或环境中将ECMAScript 2015+代码转换为JavaScript的向后兼容版本
gitignore	git上传需要忽略的文件格式
vue.config.js	保存vue配置的文件，可以用于设置代理,打包配置等
README.md	项目说明

输入npm run dev命令来启动项目
运行成功后在浏览器输入：http://localhost:8080

创建vue.config.js
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
vue.config.js

const path = require('path');
module.exports = {
    //打包的输出路径（默认为dist）
    outputDir: 'build'
}

设置Eslint的语法检查
在这里插入图片描述

CaRuJan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01Vue3-认识Vue

认识VueVue是一套用于构建用户界面的渐进式框架。渐进式就跟这个图片一样，开发可以根据需求，逐渐递增所要的方式，但每个方式有不是依靠行特别强Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。库是一个模块，而Vue是一套架构，会基于自身特点向用户提供一套相当完整的解决方案，而且控制权在框架本身；对项目的侵入性较大，使用者要按照框架所规定的某种特定规范进行开发，项目如果需要更换框架，则需要重新架构整个项目。Vue的两核心响应式的数据绑定：当数据发生改变，视图可以自动更新
复制链接

扫一扫