分类 常用工具 下的文章

小编用的是phpStudy自带的mysql数据库，但在使用的时候，往往不需要php，只需要mysql数据库，一起启动太麻烦了，直接运行net start mysql显示服务名无效。于是需要将mysql数据库安装到了系统服务。
首先进入mysql的bin目录：
1.png
然后以管理员的身份打开命令窗口，然后执行：mysqld --install
2.png
成功之后会有提示，如果现实Install/Remove of the Service Denied!,就是没有用管理员的身份去运行。
如果想移除这个服务，也是在mysql的bin目录里面，以管理员的身份打开命令窗口，运行mysqld --remove

Genymotion是基于X86的，不支持ARM架构。所以有些应用是基于ARM架构编译的就无法安装。但是也有解决的办法，而且不难。但是一定要仔细。只需要一个ARM转化器就可以了。
转换器的下载地址小编就放在这里了，方便大家下载。

链接：https://pan.baidu.com/s/1w5IkZf_bHHulzlRvck-gKw 
提取码：ktxg

Genymotion是支持拖拽安装的，你只要把下载好的压缩包直接拖拽到模拟器就可以了，模拟器就会自动进行安装，但是你需要手动的重启。注意，压缩包在你本地一定要放在纯英文目录里面，否则就不会安装，而是放在了你模拟器的文件夹里面，安装不了。

小编刚刚更换了系统，发现炫龙毁灭者DC Pro不能通过快捷键（Fn+F8/F9）调节屏幕的亮度，然后就更新了自己电脑的驱动，结果还是不可以，然后就去官网下载了官方的核显驱动，然后就好了，下面是下载链接。
http://driver.shinelon.com/drivefile/Clevo/W650KJ_KK/Windows10%201.05.07/02_IntelVGA.zip

小编刚刚更换了服务器，由原来的CentOS换成了Windows，但是小编发现自己所有的文章页面都变成了404，这是怎么回事呢，百度了好多办法，最终发现windows服务器不支持伪静态，然后就找办法解决办法，但是试了n种办法之后，最终解决了这个问题。现在小编分享给大家。我的服务器版本是Windows Server 2012 R2 (64位)。
首先安装一个 URL Rewrite
安装之后重启系统。
然后在你的网站的管理中就会出现 URL Rewrite
1.png

打开之后，点击右侧的导入。

规则

2.png

再将以下代码粘贴在重写规则里面，一定记得更换为自己的域名哦

# 将 RewriteEngine 模式打开
RewriteEngine On

# 修改以下语句中的 domain 为你的论坛地址
RewriteCond %{HTTP_HOST} !^bbs.sunxiaoning.com$ [NC]
RewriteRule ^(.*)$ http://bbs.sunxiaoning.com/$1 [L,R=301]

# 修改以下语句中的 /discuz 为你的论坛目录地址，如果程序放在根目录中，请将 /discuz 修改为 /
RewriteBase/

# Rewrite 系统规则请勿修改
RewriteRule ^topic-(.+)\.html$ portal.php?mod=topic&topic=$1
RewriteRule ^article-([0-9]+)\.html$ portal.php?mod=article&articleid=$1
RewriteRule ^forum-(\w+)-([0-9]+)\.html$ forum.php?mod=forumdisplay&fid=$1&page=$2
RewriteRule ^thread-([0-9]+)-([0-9]+)-([0-9]+)\.html$ forum.php?mod=viewthread&tid=$1&extra=page\%3D$3&page=$2
RewriteRule ^group-([0-9]+)-([0-9]+)\.html$ forum.php?mod=group&fid=$1&page=$2
RewriteRule ^space-(username|uid)-(.+)\.html$ home.php?mod=space&$1=$2
RewriteRule ^([a-z]+)-(.+)\.html$ $1.php?rewrite=$2

或者建立一个.htaccess文件，然后导入。

再打开Typecho 设置里面的是否使用地址重写，选择启用，会提示你，重写失败，不过不要紧，打上对号，选择任然启用就可以了。

小编刚刚更换了服务器，由原来的CentOS换成了Windows，但是小编发现自己所有的文章页面都变成了404，这是怎么回事呢，百度了好多办法，最终发现windows服务器不支持伪静态，然后就找办法解决办法，但是试了n种办法之后，最终解决了这个问题。现在小编分享给大家。我的服务器版本是Windows Server 2012 R2 (64位)。
首先安装一个 URL Rewrite
安装之后重启系统。
然后在你的网站的管理中就会出现 URL Rewrite
1.png

打开之后，点击右侧的导入。

规则

2.png

再将以下代码粘贴在重写规则里面

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php [L]
</IfModule>

或者建立一个.htaccess文件，然后导入。

再打开Typecho 设置里面的是否使用地址重写，选择启用，会提示你，重写失败，不过不要紧，打上对号，选择任然启用就可以了。

小编在登录远程桌面的时候一直显示由于CredSSP加密Oracle修正 1.png
的警告，连接不上。最终通过以下办法解决了

  1. 首先点击windows+R键
  2. 输入gpedit.msc,点击确定。
    2.png
  3. 然后依次选择：计算机配置>管理模板>系统>凭据分配>加密Oracle修正
    3.png
    4.png
    5.png
    双击打开
  4. 更改设置
    6.png
    点击应用完成即可，如果不生效就重启电脑。

在webpack中配置.vue组件页面的解析

  1. 运行npm i vue -S将vue安装为运行依赖；
  2. 运行npm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖；
  3. 运行npm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式；

  4. 在webpack.config.js中，添加如下module规则

    module: {

rules: [

  { test: /\.css$/, use: ['style-loader', 'css-loader'] },

  { test: /\.vue$/, use: 'vue-loader' }

]

 }

  5. 创建App.js组件页面

    <template>

  <!-- 注意：在 .vue 的组件中，template 中必须有且只有唯一的根元素进行包裹，一般都用 div 当作唯一的根元素 -->

  <div>

    <h1>这是APP组件 - {{msg}}</h1>

    <h3>我是h3</h3>

  </div>

</template>

 <script>

// 注意：在 .vue 的组件中，通过 script 标签来定义组件的行为，需要使用 ES6 中提供的 export default 方式，导出一个vue实例对象

export default {

  data() {

    return {

      msg: 'OK'

    }

  }

}

</script>

<style scoped>

h1 {

  color: red;

}

</style>

6.创建main.js入口文件

 // 导入 Vue 组件

   import Vue from 'vue'

   // 导入 App组件

   import App from './components/App.vue'

   // 创建一个 Vue 实例，使用 render 函数，渲染指定的组件

   var vm = new Vue({

     el: '#app',

     render: c => c(App)

   });

在使用webpack构建的Vue项目中使用模板对象

在webpack.config.js中添加resolve属性：

resolve: {
   alias: {
     'vue$': 'vue/dist/vue.esm.js'
   }
 }

在vue组件页面中，集成vue-router路由模块

  1. 导入路由模块：

    import VueRouter from 'vue-router'

  2. 安装路由模块：

    Vue.use(VueRouter);

  3. 导入需要展示的组件:

    import login from './components/account/login.vue'

import register from './components/account/register.vue'

  4. 创建路由对象:

    var router = new VueRouter({

  routes: [

    { path: '/', redirect: '/login' },

    { path: '/login', component: login },

    { path: '/register', component: register }

  ]

});

  5. 将路由对象，挂载到 Vue 实例上:

    var vm = new Vue({

  el: '#app',

  // render: c => { return c(App) }

  render(c) {

    return c(App);

  },

  router // 将路由对象，挂载到 Vue 实例上

});

  6. 改造App.vue组件，在 template 中，添加router-link和router-view：

        <router-link to="/login">登录</router-link>

    <router-link to="/register">注册</router-link>



    <router-view></router-view>

组件中的css作用域问题scoped

scoped仅在当前组件，或者子组件中有效

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

抽离路由为单独的模块

import VueRouter from 'vue-router'

// 导入 Account 组件
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'

// 导入Account的两个子组件
import login from './subcom/login.vue'
import register from './subcom/register.vue'

// 3. 创建路由对象
var router = new VueRouter({
 routes: [
   // account  goodslist
   {
     path: '/account',
     component: account,
     children: [
       { path: 'login', component: login },
       { path: 'register', component: register }
     ]
   },
   { path: '/goodslist', component: goodslist }
 ]
})

// 把路由对象暴露出去
export default router

使用webpack打包css文件

  1. 安装loader

    npm i style-loader css-loader -D

  2. 修改webpack.config.js这个配置文件：

    module: { // 用来配置第三方loader模块的
    rules: [ // 文件的匹配规则
        { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
    ]
}
  3. 注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的.

使用webpack打包less文件

  1. 安装loader

    npm i less-loader less -D

  2. 修改webpack.config.js这个配置文件

    { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }

使用webpack打包sass文件

注意：有时候使用npm i node-sass -D装不上，这时候，就必须使用 cnpm i node-sass -D

  1. 安装loader

    npm i sass-loader node-sass -D

  2. 修改webpack.config.js这个配置文件

    { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

使用webpack处理css中的路径

  1. 安装loader

    npm i url-loader file-loader -D

  2. 修改webpack.config.js这个配置文件

    { test: /\.(png|jpg|gif)$/, use: 'url-loader' },
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }

  3. 可以通过limit指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码,并且设置图片是否被重命名。

     { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }

使用babel处理高级JS语法

  1. 运行npm i babel-core babel-loader babel-plugin-transform-runtime -D安装babel的相关loader包.
  2. 运行npm i babel-preset-es2015 babel-preset-stage-0 -D安装babel转换的语法.

  3. 在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：

    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

  4. 在项目根目录中添加.babelrc文件，并修改这个配置文件如下：

    {
"presets":["es2015", "stage-0"],
"plugins":["transform-runtime"]
}
  5. 注意：语法插件babel-preset-es2015可以更新为babel-preset-env，它包含了所有的ES相关的语法。

注意：如果要通过路径的形式，去引入 node_modules 中相关的文件，可以直接省略 路径前面的 node_modules 这一层目录，直接写 包的名称，然后后面跟上具体的文件路径，不写 node_modules 这一层目录 ，默认 就会去 node_modules 中查找。

webpack 能够处理 JS 文件的互相依赖关系；webpack 能够处理JS的兼容问题，把高级的、浏览器不是别的语法，转为低级的，浏览器能正常识别的语法

webpack的安装

  1. 运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令。
  2. 在项目根目录中运行npm i webpack -D安装到项目依赖中。

使用webpack进行打包

方式一：命令打包

webpack [要打包的文件的路径以及文件名] -o [打包后的文件路径以及文件名] 这是webpack4.1之后的打包命令。
webpack [要打包的文件的路径以及文件名] [打包后的文件路径以及文件名] 这是webpack4.1之前的打包命令。
方式二：配置文件

  • 在项目根目录中创建webpack.config.js

  • 由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径：

     // 导入处理路径的模块
var path = require('path');

// 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
module.exports = {
    entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
    output: { // 配置输出选项
        path: path.resolve(__dirname, 'dist'), // 配置输出的路径
        filename: 'bundle.js' // 配置输出的文件名
    }
}

此时只需要执行webpack命令就可以打包了。
此时webpack做了以下几步：

  1. 首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口；
  2. webpack 就会去 项目的 根目录中，查找一个叫做 webpack.config.js 的配置文件；
  3. 当找到配置文件后，webpack 会去解析执行这个 配置文件，当解析执行完配置文件后，就得到了 配置文件中，导出的配置对象；
  4. 当 webpack 拿到 配置对象后，就拿到了 配置对象中，指定的 入口 和 出口，然后进行打包构建。

webpack的实时打包构建

  1. 由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。
  2. 运行cnpm i webpack-dev-server -D安装到开发依赖
  3. 安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，此时需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中。如果在运行此命令的时候显示webpack-dev-server不是内部或外部命令就对webpack-dev-server进行全局安装npm i webpack-dev-server -g。
  • 把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快

  • 这个时候访问webpack-dev-server可以使用--contentBase src指令来修改dev指令，指定启动的根目录,端口号，热更新等：

      "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

使用 webpack-dev-server 这个工具，来实现自动打包编译的功能的总结：

  1. 运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖;
  2. 安装完毕后，这个工具的用法，和webpack 命令的用法，完全一样;
  3. 由于，我们是在项目中，本地安装的 webpack-dev-server ， 所以，无法把它当作 脚本命令，在powershell 终端中直接运行；（只有那些 安装到 全局 -g 的工具，才能在 终端中正常执行）
  4. 注意： webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中，必须安装 webpack
  5. webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到 实际的 物理磁盘上；而是，直接托管到了 电脑的内存中，所以，我们在 项目根目录中，根本找不到 这个打包好的 bundle.js;
  6. 我们可以认为， webpack-dev-server 把打包好的 文件，以一种虚拟的形式，托管到了 咱们项目的 根目录中，虽然我们看不到它，但是，可以认为， 和 dist src node_modules 平级，有一个看不见的文件，叫做 bundle.js.

使用html-webpack-plugin插件配置启动页面

由于使用--contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐大家使用html-webpack-plugin插件配置启动页面.

  1. 运行npm i html-webpack-plugin -D安装到开发依赖。

  2. 修改webpack.config.js配置文件如下：

     // 导入处理路径的模块
var path = require('path');
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
    output: { // 配置输出选项
        path: path.resolve(__dirname, 'dist'), // 配置输出的路径
        filename: 'bundle.js' // 配置输出的文件名
    },
    plugins:[ // 添加plugins节点配置插件
        new htmlWebpackPlugin({
            template:path.resolve(__dirname, 'src/index.html'),//模板路径
            filename:'index.html'//自动生成的HTML文件的名称
        })
    ]
}

  3. 修改package.json中script节点中的dev指令如下：

    "dev": "webpack-dev-server"
  4. 将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中。

实现自动打开浏览器、热更新和配置浏览器的默认端口号

方式一：
修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 3000表示打开的端口号为3000，--hot表示启用浏览器热更新：

"dev": "webpack-dev-server --hot --port 3000 --open"

方式二：

  1. 修改webpack.config.js文件，新增devServer节点如下：

    devServer:{
   hot:true,
   open:true,
   port:4321
}

  2. 在头部引入webpack模块

    var webpack = require('webpack');

  3. 在plugins节点下新增： new webpack.HotModuleReplacementPlugin()

    plugins: [ // 配置插件的节点
new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
new htmlWebpackPlugin({ // 创建一个 在内存中 生成 HTML  页面的插件
 template: path.join(__dirname, './src/index.html'), // 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面
 filename: 'index.html' // 指定生成的页面的名称
})
 ]
  1. 1
  2. ...
  3. 4
  4. 5
  5. 6
  6. 7
  7. 8
  8. 9
  9. 10
  10. 11