web侠客行（二十）--BOOTSTRAP模板转换VUE开发步骤

开始

src 备份 src.bak

可以把项目备份，也可以当做工作空间。因为每次新建webpack都需要安装bootstrap、jquery。

找模板 twts_141_PurpleAdmin

去bootstrap找模板

安装vue-meta模块

npm安装

npm install vue-meta --save

main.js 引入 vue-meta

import VueMeta from 'vue-meta'

Vue.use(VueMeta, {
  // optional pluginOptions
  refreshOnceOnNavigation: true
})

安装electron（非必要）

npm install --save electron

安装popper.js

npm install --save popper.js

根据index.html分模块

拷贝所有项目到src/assets 目录下

navbar

新建componets NavBar.vue

拷贝index.html的navbar 模块到 NavBar.vue 的template模块。

修改链接：
href=” 修改为 href=”../assets/
src=” 修改为 src=”../assets/

到这里就基本修改好了navbar。

解决整体样式缩小的问题

去掉导入的其他css库

// import 'bootstrap/dist/css/bootstrap.min.css'
// import 'bootstrap/dist/js/bootstrap.min'

引入js方法

'js1': {
    render(createElement) {
        return createElement(
            'script', {
                attrs: {
                    type: 'text/javascript',
                    src: './assets/vendors/js/vendor.bundle.base.js',
                },
            },
        );
    },
},
'js2': {
    render(createElement) {
        return createElement(
            'script', {
                attrs: {
                    type: 'text/javascript',
                    src: './assets/vendor.bundle.addons.js',
                },
            },
        );
    },
},
'js3': {
    render(createElement) {
        return createElement(
            'script', {
                attrs: {
                    type: 'text/javascript',
                    src: './assets/js/off-canvas.js',
                },
            },
        );
    },
},
'js4': {
    render(createElement) {
        return createElement(
            'script', {
                attrs: {
                    type: 'text/javascript',
                    src: './assets/js/misc.js',
                },
            },
        );
    },
},
'js5': {
    render(createElement) {
        return createElement(
            'script', {
                attrs: {
                    type: 'text/javascript',
                    src: './assets/js/dashboard.js',
                },
            },
        );
    },
},

细节问题解决

去掉eslint检查

.eslintignore内添加 /src/

# 改 a href 为 router-link

<a class="nav-link" href="/pro">
改为
<router-link class="nav-link" to="/pro">

nginx apache tomcat服务器停启

nginx服务停启命令

nginx

Access-Control-Allow-Origin报错解决：

在nginx.conf中增加

location / {
  add_header 'Access-Control-Allow-Origin' '*';
}

再用以下命令加载

nginx -s reload

nginx + php 配置

安装php-fpm并启动

yum install php-fpm
php_fpm -D

改nginx.conf配置，增加如下配置

location ~ \.php$ {
            fastcgi_pass   127.0.0.1:9000;
            include        fastcgi.conf;
        }

nginx 反向代理

待续

apache服务停启命令

apache和php结合（配置httpd支持php）

极简安装

yum install httpd

修改配置文档 /etc/httpd/conf/httpd.conf

vim /usr/local/apache2.4/conf/httpd.conf

第一步：取消注释

ServerName www.example.com:80

第二步：将Require all denied 改为Require all granted

<Directory />
    AllowOverride none
    Require all granted
</Directory>

第三步：增加一行AddType application/x-httpd-php .php

    AddType application/x-compress .Z
    AddType application/x-gzip .gz .tgz
    AddType application/x-httpd-php .php

第四步：增加索引页index.php
在DirectoryIndex index.html后面 增加索引页index.php

<IfModule dir_module>
    DirectoryIndex index.html index.php
</IfModule>

检查配置文件httpd.cnf的语法是否正确

apachectl -t

重新加载配置文件

service httpd restart

检测php是否正常解析

新建一个php文件

vi /var/www/html/1.php

代码：
<?php
phpinfo();
?>

浏览器打开访问 IP:80/1.php

如果显示是图片表格文件则正常；

如果显示为代码为错误；

告错检查步骤：

1、检查是否加载php的模块

/usr/local/apache2.4/bin/apachectl -M

看看有没有php5_module (shared)

如果没有php5的模块，那么安装

yum install mod_php

2.检查是否增加php

vi /etc/httpd/conf/httpd.conf

查看是否存在
AddType application/x-httpd-php .php

3.检查是否增加索引页index.php

DirectoryIndex index.html index.php

图片上传：
需要安装gd库

yum install php-gd

启动php-fpm：

php-fpm

LAMP安装

centos参考 
https://blog.csdn.net/zhanghao143lina/article/details/78981727

ubuntu参考
https://help.ubuntu.com/community/ApacheMySQLPHP

Apache-MySQL-PHP参考
https://en.wikipedia.org/wiki/List_of_Apache%E2%80%93MySQL%E2%80%93PHP_packages

Nginx-MySQL-PHP参考
https://en.wikipedia.org/wiki/List_of_Nginx%E2%80%93MySQL%E2%80%93PHP_packages

镜像站
http://mirror.bit.edu.cn/apache/

改apache服务器端口

/etc/httpd/conf/httpd.conf

搜索
/Listen

改为：Listen 81

改Access-Control-Allow-Origin错误

, , or 其中一个标签中增加

Header set Access-Control-Allow-Origin "*"

改默认登录index.html, index.php

/etc/httpd/conf/httpd.conf

搜索
/dir_module

改为：
<IfModule dir_module>
    DirectoryIndex index.html index.php
</IfModule>

tomcat服务停启命令

windows系统：

shutdown.bat
startup.bat

Linux系统：

shutdown.sh
startup.sh

mysql服务停启命令

service mysqld start
service mysqld stop

eclipse问题解决

web项目打包

建立java web项目，项目点击右键->export->Runable JAR File->选择主类与本机存储。

vue引入css文件

在入口js文件main.js中引入，一些公共的样式文件，可以在这里引入。

import Vue from 'vue'
import App from './App' // 引入App这个组件
import router from './router' /* 引入路由配置 */
import axios from 'axios'
import '../static/css/global.css' /*引入公共样式*/

在index.html中引入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>stop</title>
    <link rel="stylesheet" href="./static/css/global.css"> /*引入公共样式*/

  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

在vue文件中引入

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
  @import './../static/css/global.css'; /*引入公共样式*/

</style>

vue scoped 引入

<style scoped src="../../static/index.css" />
<style scoped src="../../static/style.css" />

vue 集成 form-making

安装 element-ui

cnpm i element-ui -S

安装 form-making

cnpm i form-making -S

main.js 引入

// import ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

// import form-making
import FormMaking from 'form-making'
import 'form-making/dist/FormMaking.css'
Vue.use(FormMaking)

vue 组件引入

引入以下即可使用

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>

或者使用以下方式（推荐）

import 'element-ui/lib/index.js'
import 'form-making/dist/FormMaking.umd.js'

webpack.base.conf.js 环境配置

如果报错，则做此步骤

{
    test: /\.css$/,
    include: [
        /src/,//表示在src目录下的css需要编译
        '/node_modules/element-ui/lib/'   //增加此项
    ],
    loader: 'style-loader!css-loader'
},
{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
}

安装 css-loader 等组件

用npm run dev 运行vue项目时，出现以下错误：

ERROR  Failed to compile with 1 errors                                                                                                                                                                        11:17:27
This dependency was not found:

* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-331f341c","scoped":true,"hasInlineConfig":false}!less-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Index.vue in ./src/components/Index.vue

To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-331f341c","scoped":true,"hasInlineConfig":false}!less-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./Index.vue

解决方法，看错误中列出了哪几个模块，都给装上：

npm install stylus-loader css-loader style-loader less-loader --save-dev

form表单验证

// VeeValidate
https://baianat.github.io/vee-validate/guide/getting-started.html#installation

// Vuelidate
https://vuelidate.netlify.com/#getting-started

wordpress讲解

github下载

https://github.com/sylucky/WordPress

解压到apache服务器中

安装apache服务器与mysql服务器

解压github压缩包到apache www目录

配置数据库

CREATE DATABASE wordpress;

CREATE USER 'wpusr'@'localhost' IDENTIFIED BY 'Difficult_password1234';
GRANT ALL ON wordpress.* TO 'wpusr'@'localhost' WITH GRANT OPTION;

CREATE USER 'wpusr'@'%' IDENTIFIED BY 'Difficult_password1234';
GRANT ALL ON wordpress.* TO 'wpusr'@'%' WITH GRANT OPTION;

网站登录

网站登录，按提示操作。