Vue框架使用

Vue环境搭建

 Vue环境需要自建服务器node, node用c++语言编写, 用来运行JavaScript语言. node可以为前端提供server(包含socket模块), 

还需要npm包管理器, 是node扩展功能. 加速下载

下载Vue模块:

链接:https://nodejs.org/en/

下载长期支持的稳定版, 按要求安装即可.

安装完成后输入下面指令:

# 管理员命令行：
# Windows: npm install -g cnpm --registry=https://registry.npm.taobao.org
# MacOS: sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

# 索引npm的指令都可以换成cnpm
# npm install vuex => cnpm install vuex

在命令行进入目标文件, 创建Vue项目

vue create 目录名

"""起步
1.cd 到目标目录
2.创建项目：vue create 目录名
"""


""" 创建项目的过程
提示下载原：选择淘宝镜像

具体配置：上下键切换，空格键选择，回车键进入下一步
1.第二个选项进入自定义配置
2.Babel jsES6语法转换ES5，Router路由 Vuex组件数据交互 Formatter格式化代码
3...有提示选择大写，没提示默认第一个即可
"""

""" 终端启动
1.进入项目：cd到项目目录
2.启动项目：npm run serve
"""

""" pycharm配置
1.按照vue.js插件，重启
2.配置项目的npm启动项
"""

vue在pycharm中的配置

用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组件

vue中的标签

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

<!--将components组件导入Home组件案例-->
<!-- Home组件-->
<template>
  <div class="home">
      <test></test>
      <test1></test1>
  </div>
</template>

<script>
    import test from '@/components/test'
    import test1 from '@/components/test1'
    export default {
      components: {
        test,
        test1,
      }
    }
</script>

<!-- test组件-->

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

<script>
    export default {
        name: "test"
    }
</script>

<style scoped>
    p {
        color: red;
    }
</style>


<!-- test1组件-->

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

<script>
    export default {
        name: "test"
    }
</script>

<style scoped>
    p {
        color: red;
    }
</style>

全局脚本文件入口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
new Vue({
    el: '#app',
    router,
    store,
    render: function (readFn) {
        return readFn(App);
    },
});

Vue项目启动生命周期与页面组件的运用

请求过程:

1) 先经过main.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>

3) 如果请求链接改变(路由改变)，就会匹配新链接对应的页面组件，新页面组件会替换渲染router-view标签，替换掉之前的页面标签(就是完成了页面跳转)

框架操作案例

使用assets静态资源文件配置全局css样式, 在components小组件文件配置小组件Nav, 在页面组件文件views组件配置主页面, 配置RedPag页面,BluePag页面等,使用router.js路由脚本文件在App.vue根组件中渲染.通过main.js文件启动程序

App.vue

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

views/RedPage.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>

router.js

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";
import '@/assets/css/global.css'

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

assets/css/global.css(全局样式文件)

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

components/Nav.vue

<template>
    <div class="nav">
        <!--采用vue-router完成页面跳转，不能采用a标签（会发生页面刷新，本质就是重新加载了一次项目界面）-->
        <ul>
            <li>
                <!--<a href="/">主页</a>-->
                <router-link to="/">主页</router-link>
            </li>
            <li>
                <router-link to="/red">红页</router-link>
            </li>
            <li>
                <router-link to="/blue">蓝页</router-link>
            </li>
        </ul>
    </div>
</template>

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

<style scoped>
    .nav {
        width: 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>

views/HomePage.vue：RedPage.vue与BluePage都是添加下方三个步骤代码

<template>
    <div class="home">
        <!-- 3）使用Nav组件 -->
        <Nav></Nav>
    </div>
</template>

<script>
    // 1）导入Nav组件
    import Nav from '@/components/Nav'
    export default {
        // 2）注册Nav组件
        components: {
            Nav,
        }
    }
</script>