VUE之项目搭建实施

一：项目环境搭建#

（1）基础简介#

'''
node 类似于Python解释器
npm  类似于pip安装商城
vue   类似于Django框架
'''

（2）环境创建#

官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/ # 安装node

 npm install -g cnpm --registry=https://registry.npm.taobao.org
'''
1:安装node节点会自动安装npm软件商城
2:更换npm的更新源 从国外更为国内淘宝源
'''

 cnpm install -g @vue/cli  # 安装vue项目脚手架

npm cache clean --force # 2或3终端安装失败时，可以清空 npm缓存 再重复执行失败的步骤

（3）项目创建

1) 进入存放项目的目录
>: cd ***

2) 创建项目
>: vue create 项目名

3) 项目初始化

 二：pycharm配置并启动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组件分析#

（1）创建思路

　　（1）一个template模板中只有一个根标签

　　（2）script必须将组件导出 export default{}

　　（3）style标签明确scoped属性，代表该样式只在组件内部起作用(样式的组件化)

<template>
    <div class="home">
<!--      页面渲染-->
        <Test></Test>
        <Test2></Test2>
    </div>
</template>

<script>

    // 导入外部标签
    import Test from "../components/Test";
    import Test2 from "../components/Test2";

    export default {
        name: 'home',
        components: {
          // 注册标签
            Test2,
            Test
        }
    }
</script>

<template>
    <div class="test">
        <p>test1</p>
    </div>
</template>

<script>
    export default {
        // 将模板导出
        name: "Test"
    }
</script>

<style scoped>
<!--    设置标签样式-->
.test{
    color: red;
}
</style>

五：全局脚本文件main.js（配置项目入口）#

import Vue from 'vue'   　　　　  // 加载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');  // 挂载点

// 改写环境
new Vue({
  el:'#app',  // 挂载点 此挂载点是与App.vue根组件有关
  router,     // 配置路由
  store,
  render:function (readFn) {   // 进行根组件渲染
    return readFn(App);       // 将上述导入的根组件APP传出
  }
});

六：VUE项目启动的生命周期与页面组件的运用#

（1）请求过程#

　　（1）加载main.js进入项目启动入口

1： import Vue from 'vue' 为项目加载vue环境
2： import App from './App.vue' 加载根组件用于渲染替换挂载点
3： import router from './router' 加载路由脚本文件，进入路由相关配置

　　（2）加载router.js文件 为项目提供路由服务（页面与路由的映射关系）

'''
1：不管当前页面加载的是什么路由 页面一定加载的是根组件
2:页面加载的只是替换根组件的路由
3：根组件路由<router-view> </router-view>
'''

　　（3）若路由发送改变 发生改变的路由 会替换原有根组件<router-view></router-view>路由

（2）加载的文件#

import Vue from 'vue'   // 加载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'
import Router from 'vue-router'
import Home from './views/Home.vue'
import BluePage from './views/BluePage'
import RedPage from './views/RedPage'

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      // 路由添加
     path: '/red',
     name:  'RedPage',
      component: RedPage
    },
       {
     path: '/blue',
     name:  'BluePage',
      component: BluePage
    }


  ]
})

<template>
  <div id="app">
<!--    
1：url路径加载不同的页面
2：完成路由的替换
-->
    <router-view></router-view>
  </div>
</template>

七：全局样式文件配置#

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

import '@/assets/css/global.css'  // main.js 全局加载CSS样式

 八：新增页面三步走#

（1）在views文件夹下创建视图页面

（2）在router.js中配置路由 注册文件

（3）在App.vue中替换路由

<template>
    <div class="YellowPage">
        <Nav></Nav>
    </div>
</template>

<script>
    import Nav from "../components/Nav";
    export default {
        name: "YellowPage",
        components:{
            Nav
        }
    }
</script>

<style scoped>
.YellowPage{
    /*高度满屏*/
    height: 100vh;
    /*宽度满屏*/
    width: 100vw;
    background: yellow;
}
</style>

import YellowPage from "./views/YellowPage";
        {
            path: '/yellow',
            name: 'YellowPage',
            component: YellowPage
        }

<template>
  <div id="app">
<!--
1：url路径加载不同的页面
2：完成路由的替换
-->
    <router-view></router-view>
  </div>
</template>

九：组件生命周期钩子#

https://cn.vuejs.org/v2/api # 参考官方链接

（1）定义:一个组件从创建到销毁被称之为组件生命周期

（2）生命周期过程：

　　（1）创建之前，创建完毕，组件数据渲染，组件销毁，销毁完毕

（3）每一个时间节点 对应一个回调函数 每一个时间节点在对应的回调函数执行逻辑代码

 （4）beforecreate:组件创建了 但是方法和属性还未提供

（5）create组件创建了 数据和方法已经提供

（6）destroyed组件销毁完毕

<template>
    <div class="RedPage">
        <Nav></Nav>
    </div>
</template>

<script>
    import Nav from "../components/Nav";

    export default {
        name: "RedPage",
        data() {
            return {
                title: '红页'
            }
        },
        components: {
            Nav
        },
       methods: {
            alterTitle() {
                alert(this.title)
            }
        },
        beforeCreate() {
            console.log(this.title);  // 调用属性
            console.log(this.alterTitle)  // 调用方法
        },
        created() {
            console.log(this.title);
            console.log(this.alterTitle)
        },
        destroyed() {
            console.log('页面被销毁了')
        }
    }
</script>

<style scoped>
    .RedPage {
        height: 100vh;
        width: 100vw;
        background: red;
    }
</style>

十：高亮路由标签案例#

<template>
    <div class="nav">
        <ul>
            <!--        此方式不支持 会重新加载页面-->
            <!--        <li><a href="/">主页</a></li>-->
            <li @click="changePage('/')" :class="{active:currentPage==='/'}">
                <router-link to="/">
                    主页
                </router-link>
            </li>
            <li @click="changePage('/red')" :class="{active:currentPage==='/red'}">
                <router-link to="/">
                    红页
                </router-link>
            </li>
            <li @click="changePage('/yellow')" :class="{active:currentPage==='/yellow'}">
                <router-link to="/">
                    黄页
                </router-link>
            </li>
            <li @click="changePage('/blue')" :class="{active:currentPage==='/blue'}">
                <router-link to="/">
                    蓝页
                </router-link>
            </li>


        </ul>
    </div>
</template>

<script>
    export default {
        name: "Nav",
        data() {
            return {
                // 直接在created钩子函数中，获取当前的url路径，根据路径更新currentPage
                currentPage: ''
            }
        },
        methods: {
            changePage(path) {
                this.$router.push(path)  // 进行路由跳转
            }
        },
        created() {
            //  当前组件加载成功，要根据当前实际所在的路径，判断单选激活标签
            this.currentPage = this.$route.path;
        }
    }
</script>

<style scoped>
    .nav {
        width: 100%;
        height: 60px;
        background-color: peru;
    }

    .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>

<template>
    <div class="RedPage">
        <Nav></Nav>
    </div>
</template>

<script>
    import Nav from "../components/Nav";

    export default {
        name: "RedPage",
        data() {
            return {
                title: '红页'
            }
        },
        components: {
            Nav
        },
       methods: {
            alterTitle() {
                alert(this.title)
            }
        },
        beforeCreate() {
            console.log(this.title);  // 调用属性
            console.log(this.alterTitle)  // 调用方法
        },
        created() {
            console.log(this.title);
            console.log(this.alterTitle)
        },
        destroyed() {
            console.log('页面被销毁了')
        }
    }
</script>

<style scoped>
    .RedPage {
        height: 100vh;
        width: 100vw;
        background: red;
    }
</style>

<template>
    <div class="BluePage">
        <Nav></Nav>
    </div>
</template>

<script>
    import Nav from "../components/Nav";

    export default {
        name: "BluePage",
        components: {
            Nav
        }
    }
</script>

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

<template>
    <div class="YellowPage">
        <Nav></Nav>
    </div>
</template>

<script>
    import Nav from "../components/Nav";
    export default {
        name: "YellowPage",
        components:{
            Nav
        }
    }
</script>

<style scoped>
.YellowPage{
    /*高度满屏*/
    height: 100vh;
    /*宽度满屏*/
    width: 100vw;
    background: yellow;
}
</style>