vue框架的使用

时间：2019-11-15 00:02:37 阅读：140 评论：0 收藏：0 [点我收藏+]

标签：注册页面删除就是显示图标 pad params har 自定义

pycharm打开.vue文件由于ESLint语法检查代码出现红色波浪线

方法1

重新建一个项目，不安装eslint这个插件

技术图片

方法2

设置不使用 ESLint 语法检查

技术图片

方法3

通过ESLint中的fix eslint problems对.vue文件语法进行自动修复

选中要修复的.vue文件，也可以选中整个文件夹进行修复（修复时间受修复的文件数量影响，如果文件数量比较大，不建议修复，可以设置ESLint不验证语法）。

技术图片

vue项目中js文件报红的处理

技术图片

根据提示js的配置进行修改

vue内的文件

技术图片

public下面的index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--  适配移动端   疏放程度是1倍-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--  图标-->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--  标题，这个可以自己进行修改-->
<!--    <title>b-proj</title>-->
    <title>vue项目</title>

</head>
<body>
<!--当浏览器不支持js 的时候，会打印下面的这段话-->
<!--现在都支持,所以可以不需要-->
<noscript>
    <strong>We're sorry but b-proj doesn't work properly without JavaScript enabled. Please enable it to
        continue.</strong>
</noscript>
<!--下面的挂采点-->
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

修改后

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vue项目</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

app.vue

style中写入的全局配置，这个可以进行删除

<style>
  /*全局配置*/
#app {
  /*浏览器配置*/
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

app.vue修改后保留

<script src="main.js"></script>
<template>
    <div id="app">
        <!--提供一个视图组件占位符，占位符被哪个views下的视图组件替换，浏览器就显示哪个页面组件-->
        <router-view/>
    </div>
</template>

main.js

1.入口文件：加载vue、router、store等配置以及加载自定义配置(自己的js、css，第三方的js、css)
2.创建项目唯一根组件，渲染App.vue，挂载到index.html中的挂载点 => 项目页面显示的就是 App.vue 组件
3.在App.vue中设置页面组件占位符
4.浏览器带着指定 url链接访问vue项目服务器，router组件就会根据请求路径匹配映射组件，去替换App.vue中设置页面组件占位符
eg: 请求路径 /user => 要渲染的组件 User.vue => 替换App.vue中的 <router-view/>

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

修改后

import Vue from 'vue'  // 加载vue环境
import App from './App.vue'  // 导入根组件
import router from './router'  // 加载路由环境 vue-router
import store from './store'  // 加载仓库环境 vuex

Vue.config.productionTip = false;  // Tip提示
new Vue({
    el: '#app',//挂载点
    router: router,//路由
    store,
    render: function (read_root_vue) {//read_root_vue任意的一个函数,和h相同
        return read_root_vue(App)
    }
});

组件的使用规则

.vue文件就是一个组件：html、css、js
html由template标签提供：有且只有一个根标签
css由style标签管理：style标签添加scope属性，保证样式只在该组件内部起作用(样式组件化)
js由script标签管理：内部书写的就是组件{}语法，但是一定要导出 export default

导出：

    export default {
        name: 'home',
        components: {
        },
        data() {
            return {
            }
        }
    }

导入：

import Home from '../views/Home.vue

    export default {
        name: 'home',
        // 2、注册要使用的小组件
        components: {
            Nav,
            Footer,
            Book,
        },
        data() {
            return {
                books
            }
        }
    }

使用

在<template></template>内部使用

<template>
    <div class="home">
        <!--vue项目环境下，模板也受vue环境控制，使用标签支持大小写-->
        <!--3、使用导入的小组件-->
        <Nav></Nav>

        <div class="main">
            <!-- key属性是为标签建立缓存的标识，不能重复，且在循环组件下，必须设置 -->
            <Book v-for="book in books" :book="book" :key="book.title" />
        </div>

        <Footer></Footer>
    </div>
    
</template>

在components文件夹下的组件路由跳转的方式

router-link会别解析为a标签，但是不能直接写a，因为a跳转回刷新页面

方式1

<router-link :to="'/book/detail/' + book.id">{{ book.title }}</router-link>

方式2

<router-link :to="{name: 'book-detail', params: {pk: book.id}}">{{ book.title }}</router-link>

方式3

this.$router.push(`/book/detail/${id}`);

方式4

this.$router.push({
    name: 'book-detail',
    params: {pk: id},
});

在roter下的index.js路由配置的方式

路由规则表：注册页面组件，与url路径形成映射关系
首先都需要将所需要的组件导入到本文件夹下，如：import Home from ‘../views/Home.vue‘

方式1：默认链接

   {
        path: '/',
        name: 'home',
        component: Home
    },

方式2：重定向

    {
        path: '/index',
        redirect: '/'
    },

方式3：新链接

    {
        path: '/user',
        name: 'user',
        component: User
    },

方式4：有名分组

    {
        path: '/book/detail/:pk',
        name: 'book-detail',
        component: BookDetail
    },

方式5：另外一种链接

另外一种导入方式

component: () => import(/* webpackChunkName: "about" */ ‘../views/About.vue‘)等同于component: () => import( ‘../views/About.vue‘)等同于import About from ‘../views/About.vue

{
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}

src静态资源如何加载

当组件自己使用的时候，静态资源的加载可以使用相对路径‘../assets/img/西游记.jpg‘
前台自己提供的静态资源，在传输后再使用(组件间交互)，要才有require函数来加载资源let img1 = require(‘../assets/img/西游记.jpg‘);

vue框架的使用

标签：注册页面删除就是显示图标 pad params har 自定义

原文地址：https://www.cnblogs.com/SkyOceanchen/p/11863365.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行