Vue学习-01

最新推荐文章于 2023-07-29 14:49:47 发布

VIP文章 *八块腹肌*

最新推荐文章于 2023-07-29 14:49:47 发布

阅读量783

点赞数 1

文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_43386350/article/details/123309423

版权

Vue基本概念

vue是一个JavaScript渐进式框架
mvvm设计模式 m - model v - DOM vm - vue DOM监听和Data监听
模型，视图，视图模型双向关联的一种设计模式减少DOM操作提高开发效率

@vue/cli脚手架

@vue/cl时vue官方提供的一个全局模块包（得到vue命令），此包用于创建脚手架项目
脚手架是为了保证各施工过程顺利进行而搭建的工作平台

脚手架好处

开箱即用
0配置webpack

babel(语法降级)支持， css,less支持，开发服务器支持

脚手架安装

yarn global add @vue/cli 或者 npm install @vue/cli -g
查看是否成功 vue -V

命令不生效处理方式

背景
执行 yarn global add @vue/cli 后，重启bash……， vue命令依然不生效；
而npm 全局安装（npm install -g [package]）后，命令生效。
解决办法
yarn global bin //查找yarn安装目录
1、复制安装目录至电脑（我的电脑是win10）的环境变量中去
2、重新启动终端，发现全局命令行可以生效了

创建项目

创建项目命令 vue create 项目名
cd 进入项目下启动内置的webpack 本地热更新开发服务器 – 浏览项目页面 cd vuecli-demo 启动服务 yarn serve
访问项目 http://localhost:8080/

脚手架中文件

在这里插入图片描述

— main.js和App.vue,以及index.html作用和关系

在这里插入图片描述

脚手架服务修改默认端口 vue.config.js

module.exports = defineConfig({
   
    transpileDependencies: true,
    devServer: {
   
        port: 3000,
        open: true, // 浏览器自动打开
    }
})

eslint代码检查工具，违反规定就报错

暂时关掉eslint的配置

const {
    defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
   
    transpileDependencies: true,
    devServer: {
   
        port: 3000,
        open: true, // 浏览器自动打开
    },
    lintOnSave: false, // 关闭eslint 检查
})