• Vue项目环境搭建及项目目录简介


    一.Vue项目环境搭建

    ...
    vue环境通过npm下载,npm和python中的pip一样相当于一个应用商店,
    npm需要先下载node,就相当于python一样是一门后端语言
    node ~= python:node是用c++编写用来运行js代码的
    npm(cnpm) ~= pip:npm是一个终端的应用商城,可以更换为国内的淘宝源cnpm
    vue ~= django:vue是一个框架用来搭建vue前端项目的
    
    1.安装node
    官网下载安装包:https://nodejs.org/zh-cn/,
    进入官网下载长期支持版,下载完成后一步步安装,显示安装完成后node和npm即安装完成 2.更换安装源
    在终端中输入指令 npm install
    -g cnpm --registry=https://registry.npm.taobao.org 3.安装vue项目脚手架 cnpm install -g @vue/cli 注:如果安装失败或者中途终止安装,可以清空下载缓存,再重复执行上述步骤
    清空缓存指令:npm cache clean --force ...

    安装完成后可以在终端敲vue指令查看是否安装完成

    二.Vue项目创建和pycharm配置vue项目

    1.Vue项目创建

    ...
    1.进入存放项目的目录
        cd:目录
    
    2.创建项目
       vue create 项目名
    3.项目初始化 ...

    选择红框的内容就能创建一个vue项目

    2.pycharm配置vue项目

    1.用pycharm打开vue项目
    2.添加配置npm启动

    配置完成后在pycharm启动按钮启动项目

    或者在终端中在项目所处文件夹中敲入命令:cnpm run serve启动项目

    在浏览器中输入url:http://localhost:8080/,就可以打开初始的vue界面

    三.Vue项目目录结构分析

    ├── v-proj
    |    ├── node_modules      // 当前项目所有依赖,一般不可以移植给其他电脑环境
    |    ├── public            
    |    |    ├── favicon.ico  // 标签图标
    |    |    └── index.html   // 当前项目唯一的页面
    |    ├── src
    |    |    ├── assets       // 静态资源img、css、js
    |    |    ├── components   // 小组件
    |    |    ├── views        // 页面组件
    |    |    ├── App.vue      // 根组件
    |    |    ├── main.js      // 全局脚本文件(项目的入口)
    |    |    ├── router.js    // 路由脚本文件(配置路由 url链接 与 页面组件的映射关系)
    |    |    └── store.js     // 仓库脚本文件(vuex插件的配置文件,数据仓库)
    |    ├── README.md
    └    └── **配置文件

    四.Vue组件(.vue文件)

    1.template:有且只有一个根标签
    2.script:必须将组件对象导出,export default{}(导出之后在需要使用该组件的地方导入并注册)
    3.style:style标签必须明确scroped属性,代表该样式只在组件内部起作用(样式的组件化)
    <template>
        <!-- 有且只有一个根标签 -->
        <div class="Test1">
            <p>Test1</p>
        </div>
    </template>
    
    <script>
        // 需要将组件对象导出
        export default {
            name: "Test1"
        }
    </script>
    
    <style scoped>
        /*必须明确scoped属性*/
        p{
            color: red;
        }
    </style>

    五.全局脚本文件main.js(项目入口)

    原main.js代码

    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'   // 加载路由环境
    import store from './store' // 加载数据仓库环境
    
    Vue.config.productionTip = false;  // 安装完成后的提示,上线后改为true
    
    new Vue({
        el:'#app',  // 挂载点
        router,
        store,
        render: function (readFn) {
            return readFn(App);  // 返回加载根组件的函数
        },
    });

    六.Vue项目启动生命周期与页面组件的运用(重点)

    请求过程

    1.加载main.js启动项目
        import Vue from 'vue'    为项目加载vue环境
        import App from './App.vue'    加载根组件用于渲染替换挂载点
        import router from './router'    加载路由脚本文件,进入路由相关配置
    
    2.加载router.js文件,为项目提供路由服务,并加载已配置的路由(链接与页面组件的映射关系)
    注:不管当前渲染的是什么路由,页面渲染的一定是根组件,链接匹配到的页面组件只是替换根组件中的<router-view></router-view>标签
    
    3.如果请求链接改变,就会匹配新链接对应的页面组件,新页面组件会替换渲染router-view标签,替换掉之前的页面标签,从而实现页面跳转

    App.vue文件

    <template>
        <div id="app">
            <router-view></router-view>
            <!-- 通过url路径的加载不同的页面组件来替换router-view标签 -->
        </div>
    </template>

    views页面组件代码

    <template>
        <div class="red-page">
    
        </div>
    </template>
    
    <script>
        export default {
            name: "RedPage"
        }
    </script>
    
    <style scoped>
        .red-page{
            background-color: red;
            height: 100vh;
             100vw;
        }
    </style>
    RedPage.vue代码
    <template>
        <div class="blue-page">
    
        </div>
    </template>
    
    <script>
        export default {
            name: "BluePage"
        }
    </script>
    
    <style scoped>
        .blue-page{
            background-color: red;
            height: 100vh;
             100vw;
        }
    </style>
    BluePage.vue代码

    路由匹配代码

    import Vue from 'vue'
    import Router from 'vue-router'
    import Home from './views/Home.vue'
    import RedPage from './views/RedPage'
    import BluePage from './views/BluePage'
    
    Vue.use(Router);
    
    export default new Router({
        mode: 'history',
        base: process.env.BASE_URL,
        routes: [
            {
                path: '/',
                name: 'home',
                component: Home
            },
            {
                path: '/red',
                name: 'red',
                component: RedPage
            },
            {
                path: '/blue',
                name: 'blue',
                component: BluePage
            },
    
        ]
    })
    router.js代码

    七.全局样式文件配置

    在assets配置文件夹中新建css文件夹,在该文件夹中新建全局样式配置文件global.css

    html, body, h1, ul, p{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    a{
        color: black;
        text-decoration: none;
    }

    还需要在main.js新增配置

    // 全局样式配置
    import '@/assets/css/global.css'

    八.封装小组件-Nav导航栏组件

    首先在components中新建一个vue组件

    <template>
        <div class="nav">
            <ul>
                <router-link to="/"><li>主页</li></router-link>
                <router-link to="/red"><li>红页</li></router-link>
                <router-link to="/blue"><li>蓝页</li></router-link>
            </ul>
        </div>
    </template>
    
    <script>
        export default {
            name: "Nav"
        };
    </script>
    
    <style scoped>
    
        ul{
             100%;
            height: 60px;
            background-color: orange;
        }
        li{
            float: left;
            font: normal 20px/60px '微软雅黑';
            padding: 0 60px;
        }
        li:hover{
            background-color: aqua;
            cursor: pointer;
        }
        .active{
            background-color: aqua;
        }
    </style>

    然后在需要用到Nav导航栏小组件的组件中导入,三个步骤

    <template>
        <div class="red-page">
            <!-- 3使用组件 -->
            <Nav></Nav>
        </div>
    </template>
    
    <script>
        // 1导入组件
        import Nav from '@/components/Nav'
        export default {
            name: "RedPage",
            components: {
                // 2注册组件
                Nav
            }
        }
    </script>
    
    <style scoped>
        .red-page {
            background-color: red;
            height: 100vh;
             100vw;
        }
    </style>

    九.新增页面三步骤

    1.在views文件夹中创建视图组件
    
    2.在router.js文件中配置路由
    
    3.设置路由跳转,在指定路由下渲染该页面组件,替换根组件中的router-view标签

    第一步,创建视图组件,TanPage.vue

    <template>
        <div class="tan-page">
            <Nav></Nav>
        </div>
    </template>
    
    <script>
        import Nav from '@/components/Nav'
        export default {
            name: "TanPage",
            components: {
                Nav
            }
        }
    </script>
    
    <style scoped>
        .tan-page {
            background-color: tan;
            height: 100vh;
             100vw;
        }
    </style>

    第二步,配置路由

    import TanPage from './views/TanPage'
    
    Vue.use(Router);
    
    export default new Router({
        mode: 'history',
        base: process.env.BASE_URL,
        routes: [
            {
                path: '/tan',
                name: 'tan',
                component: TanPage
            },
    
        ]
    })

    第三步,在指定的页面渲染该组件,在根组件中替换

    Nav中渲染该组件

    <router-link to="/tan"><li>土页</li></router-link>

    根组件中替换router-view

    <template>
        <div id="app">
            <router-view></router-view>
            <!-- 通过url路径的加载不同的页面组件来替换router-view标签 -->
        </div>
    </template>

    十.组件生命周期钩子(官网API中查看)

    1.一个组件从创建到销毁的整个过程,就称之为组件的生命周期
    
    2.在组件创建到销毁的过程中,会出现众多关键的时间节点,如组件要创建了、组件创建完毕了、组件数据渲染完毕了、组件要被销毁了、组件销毁完毕了等等的时间节点,每一个时间节点,vue都为其提供了一个回调函数(在该组件到达该时间节点时,就会触发对应的回调函数,在函数中就可以完成该节点需要完成的业务逻辑)
    
    3.生命周期钩子函数就是vue实例成员,钩子函数在组件中的script中的export default导出字典中写

    created钩子函数

    // 一般该组件请求后台的数据都是在该钩子中完成
    // 1.请求来的数据可以给页面变量进行赋值,从而控制页面数据进行二次渲染
    // 2.该节点还只停留在虚拟DOM范畴,数据还可以进行二次的修改再渲染到页面
    // 可以在beforeMount、mounted钩子中添加逻辑处理

    代码实例

    <script>
        // 1导入组件
        import Nav from '@/components/Nav'
        export default {
            name: "RedPage",
            components: {
                // 2注册组件
                Nav
            },
            data(){
                return {msg: 123}
            },
            methods:{
                action(){
                    alert(this.msg)
                }
            },
            // 组件创建前,数据方法还没准备
            beforeCreate(){
                console.log(this.msg);
                console.log(this.action)
            },
            // 组件创建完毕,数据方法准备完毕,但还没开始渲染数据
            // 一般该组件请求后台的数据都是在该钩子中完成
            // 1.请求来的数据可以给页面变量进行赋值,从而控制页面数据进行二次渲染
            // 2.该节点还只停留在虚拟DOM范畴,数据还可以进行二次的修改再渲染到页面
            // 可以在beforeMount、mounted钩子中添加逻辑处理
            created(){
                console.log(this.msg);
                console.log(this.action)
            }
        }
    </script>

    十一.根据请求路径高亮路由标签案例

    1.router-link会被解析为a标签,用to完成指定路径跳转,但是不能添加系统事件(因为是组件标签)
    2.在js方法中可以用this.$router.push('路径')完成逻辑跳转
    3.在js方法中可以用this.$route.path拿到当前请求的页面路由

    Nav.vue组件代码

    <template>
        <div class="nav">
            <!--采用vue-router完成页面跳转,不能采用a标签(会发生页面刷新,本质就是重新加载了一次项目界面)-->
            <ul>
                <li @click="changePage('/')" :class="{active: currentPage === '/'}">
                    <!--<a href="/">主页</a>-->
                    <!--<router-link to="/">主页</router-link>-->
                    主页
                </li>
                <li @click="changePage('/red')" :class="{active: currentPage === '/red'}">
                    <!--<router-link to="/red">红页</router-link>-->
                    红页
                </li>
                <li @click="changePage('/blue')" :class="{active: currentPage === '/blue'}">
                    <!--<router-link to="/blue">蓝页</router-link>-->
                    蓝页
                </li>
                <li @click="changePage('/tan')" :class="{active: currentPage === '/tan'}">
                    <!--<router-link to="/tan">土页</router-link>-->
                    土页
                </li>
            </ul>
        </div>
    </template>
    
    <script>
        export default {
            name: "Nav",
            data() {
                return {
                    // 没渲染一个页面,都会出现加载Nav组件,currentPage就会被重置,
                    // 1)在点击跳转事件中,将跳转的页面用 数据库 保存,在钩子函数中对currentPage进行数据更新
                    // currentPage: localStorage.currentPage ? localStorage.currentPage: ''
                    // 2)直接在created钩子函数中,获取当前的url路径,根据路径更新currentPage
                    currentPage: ''
                }
            },
            methods: {
                changePage(page) {
                    // console.log(page);
                    // 当Nav出现渲染,该语句就无意义,因为在data中将currentPage重置为空
                    // this.currentPage = page;
    
                    // 有bug,用户不通过点击,直接修改请求路径完成页面跳转,数据库就不会更新数据
                    // localStorage.currentPage = page;
    
                    // 任何一个标签的事件中,都可以通过router完成逻辑条件
                    // console.log(this.$route);  // 管理路由数据
                    // console.log(this.$router);  // 管理路由跳转
                    this.$router.push(page);  // 路由的逻辑跳转
                }
            },
            // 当前组件加载成功,要根据当前实际所在的路径,判断单选激活标签
            created() {
                // console.log(this.$route.path);
                this.currentPage = this.$route.path;
            }
        }
    </script>
    
    <style scoped>
        .nav {
             100%;
            height: 60px;
            background-color: orange;
        }
        .nav li {
            float: left;
            font: normal 20px/60px '微软雅黑';
            padding: 0 30px;
        }
        .nav li:hover {
            cursor: pointer;
            background-color: aquamarine;
        }
        .nav li.active {
            cursor: pointer;
            background-color: aquamarine;
        }
    </style>

     66

  • 相关阅读:
    02_类和对象
    Django_数据库增删改查——增
    Django_同步数据库
    Django_models类属性。
    CSS_垂直居中
    CSS_背景属性
    CSS_定位
    CSS_浮动
    CSS_盒子模型
    CSS_元素的分类
  • 原文地址:https://www.cnblogs.com/sxchen/p/11651465.html
Copyright © 2020-2023  润新知