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

node 类似 python
npm 类似 pip
vue 类似 django
'''

CentOS7安装node.js(安装与换源)

Vue项目创建

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

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

3) 项目初始
'''

Pycharm配置并启动vue项目

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

结构

├── 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
└    └── **配置文件

├── luffycity
    ├── public/                      # 项目共有资源
        ├── favicon.ico                # 站点图标
        └── index.html                # 主页
    ├── src/                          # 项目主应用，开发时的代码保存
        ├── assets/                  # 前台静态资源总目录
            ├── css/                # 自定义css样式
                └── global.css        # 自定义全局样式
            ├── js/                    # 自定义js样式
                └── settings.js        # 自定义配置文件
            └── img/                # 前台图片资源
        ├── components/                # 小组件目录
        ├── views/                  # 页面组件目录
        ├── App.vue                    # 根路由
        ├── main.js                    # 入口脚本文件
        ├── router            
            └── index.js            # 路由脚本文件
        store                
            └── index.js            # 仓库脚本文件
    ├── vue.config.js                # 项目配置文件
    └── *.*                            # 其他配置文件

View Code

vue组件(xxx.vue文件内)

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

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

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

<style scoped>

</style>

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

Vue启动后,会依次加载 vue, App.vue, router, store 这几个基础环境

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');

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

请求过程

1) 加载mian.js启动项目

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

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

<router-view></router-view>

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

参与文件

main.js

项目入口文件该文件内容一般不变,若安装环境需要在此文件内注册

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

Vue.config.productionTip = false;


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

// 配置全局自定义设置
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;

// axios配置：cnpm install axios
import axios from 'axios'
Vue.prototype.$axios = axios;

// cookies配置：cnpm install vue-cookies
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;

// element-ui配置：cnpm install element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

// bootstrap+jq配置：cnpm install jquery、cnpm install bootstrap@3
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

// vue-video播放器
require('video.js/dist/video-js.css');
require('vue-video-player/src/custom-theme.css');
import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer);


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

案例

App.vue

url路径会加载不同的页面组件, 来替换router-view标签，完成页面的切换,文件内容一般不变

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

案例

页面组件

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

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

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

页面组件导入小组件,注册小组件,引用小组件三步走

<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 {
         100vw;
        height: 100vh;
        background-color: blue;
    }
</style>

案例 views/RedPage.vue

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

案例 views/BluePage.vue

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";

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

案例

全局样式文件配置

全局样式文件需要注册在main.js中

/* 声明全局样式和项目的初始化样式 */
body, h1, h2, h3, h4, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

a {
    text-decoration: none;
    color: #333;
}

ul {
    list-style: none;
}

table {
    border-collapse: collapse; /* 合并边框 */
}

案例 assets/css/global.css

小组件

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

案例导航栏组件

组件生命周期钩子(官网API)

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

beforeCreate 组件创建了，但数据和方法还未提供
created 组件创建了，数据和方法已提供,该钩子需要掌握，一般该组件请求后台的数据，都是在该钩子中完成

请求来的数据可以给页面变量进行赋值
该节点还只停留在虚拟DOM范畴，如果数据还需要做二次修改再渲染到页面，可以在beforeMount、mounted钩子中添加逻辑处理

destroyed 组件销毁时触发

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

案例

拉下来的VUE启动

1.找到vue的package.json文件

2.执行npm install 安装依赖

3.启动npm run serve 启动方式根据实际情况选择

相关阅读:
DB2 for Z/os Statement prepare
Foreign key (referential) constraints on DB2 LUW v105
复制Informational constraints on LUW DB2 v105
DB2 SQL Mixed data in character strings
DB2 create partitioned table
MVC中使用EF的技巧集（一）
Asp.Net MVC 开发技巧（二）
Linq使用技巧及查询示例（一）
Asp.Net MVC 开发技巧（一）
Asp.Net MVC Identity 2.2.1 使用技巧（八）
原文地址：https://www.cnblogs.com/waller/p/11649289.html

Vue 项目环境搭建

Vue项目环境搭建

CentOS7安装node.js(安装与换源)

Vue项目创建

Pycharm配置并启动vue项目

结构

vue组件(xxx.vue文件内)

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

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

main.js

项目入口文件该文件内容一般不变,若安装环境需要在此文件内注册

App.vue

页面组件

router.js

组件生命周期钩子(官网API)

拉下来的VUE启动

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