vue笔记_vue 设置页面靠右边-优快云博客

本文链接：https://blog.youkuaiyun.com/yc1425869600/article/details/121772647

安装脚手架

npm install -g @vue/cli 或
npm i -g @vue/cli

查看你安装vue版本

vue -V 查看版本

创建vue项目名称

vue create my-pro 回车后弹出交互式问答面板告诉我们那些功能
在这里插入图片描述
空格选择，回车下一步
default 默认创建
Manually select features 手动去选择一些功能创建项目

出现这几个选项
Babel：javascript千奇百怪的语言统统专为浏览器可以认识的语言。(推荐)
typescript：就是启用typescript支持
PWA：这个是渐进式web应用，如果用不上，不需要选
Router：是vue-router
css pre-processors：是用来支持css预处理器的，less，sass这些
linter：是用来做代码检验的，如代码缩进，规范合不合格之类的，都是它来校验

选好之后，回车进行下一步
在这里插入图片描述
是否安装历史模式路由，建议----n

选择标准的ESLint

是否把你选择的这个项目设置默认模板，下次创建直接用这套（看个人需要）
然后就开始创建了

项目创建好之后，会出现这两行绿色代码，按顺序输入就可以把项目跑一起来了

在这里插入图片描述

一些报错和解决方法

Error: The project seems to require yarn but it’s not installed.

在这里插入图片描述
解决方式是：

1、删除目录下yarn.lock文件
2、npm install -g yarn

然后重新跑一下就可以解决问题

这个报错是在安装路由时发生的

这个是因为vue环境和vue-router包不兼容
解决方法在报错上也告诉大家了，在命令后面添加 --force, or --legacy-peer-deps
npm i vue-router --force

error Component name “school” should always be multi-word

这个就是vue有命名规范，语法检查的时候把不规范的代码(即命名不规范)当成了错误。
解决办法：在vue.config.js文件中加上
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false /*关闭语法检查*/
})
关闭语法检查

路由与vue版本不匹配

vue-router 版本不对
你所建立的项目是 vue2x ，但是却下载了 vue-router4x
而 vue-router4x 适用于 vue3x
所以你需要卸载 vue-router4x，重新下载 vue-router3x
卸载：

npm uninstall vue-router

安装：(3版本）

npm i vue-router@3

功能模块

刷新页面

location.reload();

vue自带的路由跳转：

this.$router.go(0);

区域刷新
首先我们在app.vue文件输入

<template>
    <div id="app">
    	<router-view v-if="isRouterAlive"></router-view>
	</div>
</template>
<script>
    export default {
        name: 'App',
        provide () {    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。                                             
            return {
                reload: this.reload                                              
            }
        },
        data() {
            return{
                isRouterAlive: true                    //控制视图是否显示的变量
            }
        },
        methods: {
            reload () {
                this.isRouterAlive = false;            //先关闭，
                this.$nextTick(function () {
                    this.isRouterAlive = true;         //再打开
                }) 
            }
        }，
    }
</script>

接下来，我们就可以在需要刷新页面的组件里这样写：

export default {
    inject:['reload'],                                 //注入App里的reload方法
    data () {
        return {
    	.......
        }
    },

在需要刷新页面的代码块中使用：

this.reload();

vue的生命周期

- components

<div id="app">
  <haha></haha>
</div>

/*
这是最简单常用的一种创造模板方法，局部方法创造模板
要注意,局部模板 的作用范围 只在 相对的vue对象 范围内 
比如 这个例子, <haha></haha>的范围 只在 <div id="app"> </div>内
因为  haha 挂载在 vm的components下 而 vm挂载的 对应节点是 id=app的 div上
*/
let vm = new Vue({
    el:"#app",
    data:{
  },
    components:{
    "haha":{
      template:"<div>哈哈哈<div>"
    }
  }
});

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash