VUE前端框架

Vue项目环境搭建

1) 安装node
　　官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/
2) 换源安装cnpm
　　>: npm install -g cnpm --registry=https://registry.npm.taobao.org
3) 安装vue项目脚手架
　　>: cnpm install -g @vue/cli
注：2或3终端安装失败时，可以清空 npm缓存再重复执行失败的步骤
　　npm cache clean --force

Vue项目创建

　　1) 进入存放项目的目录　　d: 切换D盘　　cd D:\python_workspace\day66\代码

　　2) 创建项目　　vue create v-proj

　　3) 项目初始化　选择 Manually select features
　　　　默认选择的有Babel Linter / Formatter 在添加Router 和 Vuex
　　　　选择YES
　　　　选择第一个，直接进入
　　　　直接第一个进入
　　　　选择第一个In dedicated config files，第一个自己处理
　　　　选择NOT　

　　加载环境

　　　　选择改变端口号的地方，然后点击左边加号，选择npm，然后在右边Name中填写v-proj,

在pycharm中选择settings文件夹，选择Plugins,在右侧搜索框中搜索VUE,下载

pycharm配置并启动vue项目

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

终端启动vue cd D:\python_workspace\day66\代码\v-proj　　cnpm run serve

vue组件(.vue文件)

# 1) template：有且只有一个根标签
# 2) script：必须将组件对象导出 export default {}
# 3) style: style标签明确scoped属性，代表该样式只在组件内部起作用(样式的组件化)

App.vue

<template>
  <div id="app">
    <!--url路径会加载不同的组件
    /red => RegPage  |  /blue => BluePage
    替换router-view标签，完成也买你切换-->
    <router-view/>
  </div>
</template>

全局脚本文件main.js（项目入口）

import Vue from 'vue' //加载vue环境
import App from './App.vue' //加载根组件
import router from './router'  //加载路由环境
import store from './store'  //加载数据仓库环境

Vue.config.productionTip = false;
 //配置全局样式
import '@/assets/css/global.css'

new Vue({
  el: '#app',
  router,
  store,
  render: function (readFn) {
      return readFn(App);
  },
});

vue项目启动生命周期

1) 加载mian.js启动项目
   i) import Vue from 'vue' 为项目加载vue环境
   ii) import App from './App.vue' 加载根组件用于渲染替换挂载点
   iii) import router from './router' 加载路由脚本文件，进入路由相关配置

2) 加载router.js文件，为项目提供路由服务，并加载已配置的路由(链接与页面组件的映射关系)
   注：不管当前渲染的是什么路由，页面渲染的一定是根组件，链接匹配到的页面组件只是替换根组件中的
   <router-view></router-view>

新增页面三步骤

　　1) 在views文件夹中创建视图组件

　　2) 在router.js文件中配置路由

　　3) 设置路由跳转，在指定路由下渲染该页面组件(替换根组件中的router-view标签)

组件生命周期钩子

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

views\Home.vue

<template>
  <div class="home">
      <Nav />
      <div class="router">
          <button type="button" @click="goPage('/')">主页</button>
　　　　   <button type="button" @click="goPage('/red')">红页</button>
　　　　　 <button type="button" @click="goPage('/blue')">蓝页</button>
          <button type="button" @click="goBack('/')">返回上一页</button>
      </div>
  </div>
</template>

<script>
    import Nav from '@/components/Nav.vue'
    export default {
      name: 'home',
      components: {
        Nav
      },
        methods: {
          goPage(page) {
              let currentPage = this.$route.path;
              if (currentPage !== page){
                  this.$router.push(page);
              }
          },
            goBack(){
              this.$router.go(-1)
            },
            goPageName(pageName) {
              // alert(name)
              this.$router.push({
                  name: pageName
              })
            }
        }
    }
</script>

views\BluePage.vue

<template>
    <div class="blue-page">
        <Nav></Nav>
    </div>
</template>

<script>
    import Nav from '@/components/Nav'
    export default {
        name: "BluePage",
        components: {
            Nav
        }
    }
</script>

<style scoped>
    .blue-page {
        width: 100vw;
        height: 100vh;
        background-color: blue;
    }
</style>

views\RedPage.vue

<template>
    <div class="red-page">
        <Nav></Nav>
        <h1 class="title" @click="alterTitle">{{ title }}</h1>
    </div>
</template>

<script>
    import Nav from '@/components/Nav'
    export default {
        name: "RedPage",
        data() {
            return {
                title: '红页'
            }
        },
        methods: {
            alterTitle() {
                alert(this.title)
            }
        },
        components: {
            Nav
        },
        beforeCreate() {
            console.log('组件创建了，但数据和方法还未提供');
            // console.log(this.$data);
            // console.log(this.$options.methods);
            console.log(this.title);
            console.log(this.alterTitle);
        },
        // 该钩子需要掌握，一般该组件请求后台的数据，都是在该钩子中完成
        // 1）请求来的数据可以给页面变量进行赋值
        // 2）该节点还只停留在虚拟DOM范畴，如果数据还需要做二次修改再渲染到页面，
        //  可以在beforeMount、mounted钩子中添加逻辑处理
        created() {
            console.log('组件创建了，数据和方法已提供');
            // console.log(this.$data);
            // console.log(this.$options.methods);
            console.log(this.title);
            console.log(this.alterTitle);
            console.log(this.$options.name);
        },
        destroyed() {
            console.log('组件销毁完毕')
        }
    }
</script>

<style scoped>
    .red-page {
        width: 100vw;
        height: 100vh;
        background-color: red;
    }
    .title {
        text-align: center;
        cursor: pointer;
    }
</style>

components/Nav.vue

<template>
    <div class="nav">
        <ul>
            <li :class="{active: currentPage === '/'}">
                <router-link to="/">主页</router-link>
            </li>
            <li :class="{active: currentPage === '/red'}">
                <router-link to="/red">红页</router-link>
            </li>
            <li :class="{active: currentPage === '/blue'}">
                <router-link to="/blue">蓝页</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Nav",
        data(){
          return {
              currentPage:''
          }
        },
        created() {
            this.currentPage = this.$route.path;
        }
    }

</script>

<style scoped>
    .nav {
        width: 100%;
        height: 60px;
        background-color: orange;
    }
    .nav li {
        float: left;
        font: normal 20px/60px '微软雅黑';

    }
    .nav li:hover {
        cursor: pointer;
        background-color: aquamarine;
    }
    .nav li.active {
        cursor:pointer;
        background-color: aquamarine;
    }
    .nav li a {
        display: block;
        height: 60px;
        padding: 0 20px;
    }
</style>

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import RedPage from './views/RedPage.vue'
import BluePage from './views/BluePage.vue'

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
    },
  ]
})

猜你喜欢