B͜a͜r͜a͜n͜

B͜a͜r͜a͜n͜ 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

B͜a͜r͜a͜n͜ 发布了文章 · 9月30日

windows系统修改默认安装盘方法

一些软件不给提供修改软件安装路径的方法,如 chrome浏览器,不经意间发现这个方法可以自定义指定默认安装路径的方法为大家分享下,以后就不用担心类似 chrome浏览器这样的软件安装到不想让安装的地方
  • 首先第一步打开注册表

1.按下键盘 windows 按键,输入 regedit 选中打开(如:【图1】)
【图1】
2.快捷键 windows+r 打开运行,输入 regedit 点击确定打开(如:【图2】)
【图2】

  • 第二步打开安装路径的注册表
计算机HKEY_LOCAL_MACHINESOFTWAREMicrosoftWindowsCurrentVersion

1.复制上面的粘贴到【图3】的 1,按回车(或者自己按照路径一步一步点开)
2.修改 【图3】 2 3 4 的路径地址
3.改完建议重启下,然后安装 chrome浏览器 试试是否修改成功
【图3】

查看原文

赞 0 收藏 0 评论 0

B͜a͜r͜a͜n͜ 发布了文章 · 7月21日

vue-01.切换语言-基础版

image.png

4个文件


npm install vue-i18n
en.js

export const m = {
  music: 'Music', // 网易云音乐
  findMusic: 'FIND MUSIC', // 发现音乐
  myMusic: 'MY MUSIC', // 我的音乐
  friend: 'FRIEND', // 朋友
  musician: 'MUSICIAN', // 音乐人
  download: 'DOWNLOAD' // 下载客户端
}

zh.js

export const m = { music: '网易云音乐', findMusic: '发现音乐', myMusic: '我的音乐', friend: '朋友', musician: '音乐人', download: '下载客户端' }

helloworld

<!--
 * @Author: your name
 * @Date: 2020-07-21 10:01:23
 * @LastEditTime: 2020-07-21 10:32:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \01\src\components\HelloWorld.vue
-->
<template>
  <div class="hello">
    <button @click="changeLangEvent">切换语言</button>
<p>vue-i18n 数据渲染的模板语法
我们知道 vue 中对于文字数据的渲染,有以‘’{}‘’或者 v-text、v-html等的形式,同样的使用国际化后,依旧可以沿用,但需要一点修改。</p>
    <span v-text="$t('m.music')"></span>

    <span>{{$t('m.music')}}</span>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    changeLangEvent () {
      var r = window.confirm('确定切换语言吗?')
      debugger
      if(r === true) {
          if(this.$i18n.locale === 'zh-CN') {
            this.lang = 'en-US'
          } else {
            this.lang = 'zh-CN'
          }
          this.$i18n.locale = this.lang
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // 通过插件的形式挂载
const i18n = new VueI18n({
  locale: 'zh-CN', // 语言标识
  // this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
    'zh-CN': require('./common/lang/zh'), // 中文语言包
    'en-US': require('./common/lang/en') // 英文语言包
  }
})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,
  router,
  components: { App },
  template: '<App/>'
})
查看原文

赞 1 收藏 1 评论 0

B͜a͜r͜a͜n͜ 发布了文章 · 7月21日

'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序

看标题就知道是缺少包,安装即可

官网:https://webpack.js.org/guides...

命令:

npm install --save-dev webpack-dev-server
查看原文

赞 1 收藏 1 评论 0

B͜a͜r͜a͜n͜ 发布了文章 · 5月31日

webpack.05-Output输出配置

https://www.webpackjs.com/con...

cnpm init -y

cnpm i -D webpack webpack-cli

配置文件webpack.config.js

const path=require('path')
module.exports={
    entry:{
        test:'./src/index.js',
        demo:'./src/main.js'
    },
    mode:'development',
    output:{
        //hash指定6位
        filename:'[name]_[hash:6]_bundle.js',
        path:path.join(__dirname,'lib'),
        //生成文件:test_6ae182_bundle.js demo_6ae182_bundle.js,
        /*
静态资源准备放到cdn时候,需要加上前缀,就用publicPath
        */
        //publicPath:'http://cdn.baidu.com/assets'
    }
}

配置文件package.json

{
  "name": "05",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

未完待续...

查看原文

赞 0 收藏 0 评论 0

B͜a͜r͜a͜n͜ 发布了文章 · 5月31日

webpack.04-entry points配置

https://www.webpackjs.com/con...

cnpm init -y
cnpm i -D webpack webpack-cli

配置文件webpack.config.js

module.exports={
    mode:'development',//production 生产环境,development 开发环境
    //entry:'./src/index.js',//单一入口
    entry:{//多入口
        reg:'./src/register.js',
        det:'./src/details.js',
        main:'./src/home.js'
    }
}

打包生成

npm run build
reg.js

det.js

main.js

webpack.05-Output输出配置

查看原文

赞 0 收藏 0 评论 0

B͜a͜r͜a͜n͜ 发布了文章 · 5月30日

webpack.03-打包js同时生成html页面

新建空文件夹:cmd

npm init -y
cnpm i -D webpack webpack-cli

文件夹和文件

src(文件夹)

index.html
<script data-original="test.js">
test.js
console.log(123)
安装插件(生成html):HtmlWebpackPlugin------>https://webpack.js.org/plugins/html-webpack-plugin/
cnpm install --save-dev html-webpack-plugin
webpack.config.js
var HtmlWebpackPlugin=require('html-webpack-plugin');

module.exports= {

entry: './src/main.js',

plugins: [newHtmlWebpackPlugin()]

};
运行打包命令:
webpack src/test.js

生成文件夹和文件

dist(文件夹)

index.html
main.js

webpack.04-entry points 配置

查看原文

赞 0 收藏 0 评论 0

B͜a͜r͜a͜n͜ 发布了文章 · 5月27日

webpack.02-如何打包

在空文件夹初始化:CMD

npm init -y

-y意思是全部yes

cnpm install -D webpack webpack-cli

文件结构

src(文件夹)--->index.js 
console.log('hello webpack')
test(文件夹)--->main.js   
console.log('hello webpack2')

package.json

scripts里面加上build:webpack
webpack默认是打包src下面的index.js 可以自定义,如:build:webpack server/index.js
{
  "name": "02",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "build2": "webpack test/main.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

打包:CMD

npm run build
npm run build2

webpack.03-打包js同时生成html页面

查看原文

赞 0 收藏 0 评论 0

B͜a͜r͜a͜n͜ 发布了文章 · 5月17日

webpack.01-简单使用

webpack官网:https://webpack.js.org/

全局安装webpack
cnpm i -g webpack webpack-cli
创建index.js
console.log('hello webpack')//示例:建议写es5语法可正常运行,es6需要babel后面做笔记会写
cmd运行
webpack index.js//------>生成文件夹dist,生成文件main.js,会出现下方警告
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: 

官网mode详解:https://webpack.js.org/configuration/mode/

下面两种生成方式无警告(加上mode,默认mode为none)

开发模式development
webpack index.js --mode development//生成文件比较大
生产模式production
webpack index.js --mode production//生成文件小

webpack.02-如何打包

查看原文

赞 0 收藏 0 评论 0

B͜a͜r͜a͜n͜ 关注了用户 · 5月17日

justjavac @justjavac

会写点 js 代码

关注 14441

B͜a͜r͜a͜n͜ 关注了专栏 · 5月17日

SegmentFault 思否观察

SegmentFault 思否对开发者行业的洞见、观察与报道

关注 17895

认证与成就

  • 获得 2 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 5月17日
个人主页被 62 人浏览