碎言博客

npm更换源与nrm安装与配置

J.sky 2020-03-30 19:43:28 webpack

nrm

安装nrm

在命令行执行命令, npm install -g nrm ,全局安装nrm。

执行命令 nrm ls 查看可选的源。

如果要切换到taobao源,执行命令 nrm use taobao

很简单吧?

pip临时修改下载源

J.sky 2020-03-30 19:38:16 Python

pip临时修改源

PYPI国内源路径

  • 阿里云 http://mirrors.aliyun.com/pypi/simple/
  • 豆瓣(douban) http://pypi.douban.com/simple/
  • 清华大学 https://pypi.tuna.tsinghua.edu.cn/simple/
  • 中国科学技术大学 http://pypi.mirrors.ustc.edu.cn/simple/

临时换源

临时换源只需要在pip安装包时,加上一个-i参数后接源的url即可:

# 下载python中的Django包,这里使用的是豆瓣源
pip install django -i http://pypi.douban.com/simple

永久换源(更换默认源)

Linux

在根目录下创建/修改~/.pip/pip.confpip配置文件; 进入文件新增/修改内容;

[global]
index-url=http://pypi.douban.com/simple
[install]
trusted-host=pypi.douban.com

保存文件并退出;

Windows

windows在%HOMEPATH%\pip\pip.ini中修改上面第二步的内容; 保存文件退出;

Vue快速学习笔记(9)Vuetify配置及简单使用

J.sky 2020-03-19 09:33:18 Vue

Vuetify的安装及配置

相对来说vuecli的安装配置比较简单,在插件里搜索 Vuetify ,安装即可,这里说下 Vuetify webpack 的安装及配置方式。

首先是:

npm install vuetify
npm install sass sass-loader fibers deepmerge -D

然后是配置文件里的加载器配置,因为使用了sass,如下方法配置。

// webpack.config.js

module.exports = {
rules: [
    {
    test: /\.s(c|a)ss$/,
    use: [
        'vue-style-loader',
        'css-loader',
        {
        loader: 'sass-loader',
        // Requires sass-loader@^7.0.0
        options: {
            implementation: require('sass'),
            fiber: require('fibers'),
            indentedSyntax: true // optional
        },
        // Requires sass-loader@^8.0.0
        options: {
            implementation: require('sass'),
            sassOptions: {
            fiber: require('fibers'),
            indentedSyntax: true // optional
            },
        },
        },
    ],
    },
],
}

然后是引入,这里官网用了一个新建.js来配置 Vuetify 的引入,如果没有设置 @ 指向目录,可能会没有效果。 这里我就直接修改了在 main.js 里引用:

//导入Vue
import Vue from "vue";

import App from "./components/App.vue";

// 引入Vuetify组件
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
// vuetify 自定义配置
var vuetify = new Vuetify({})

var vm = new Vue({
    el: '#app',
    render: c => c(App),
    vuetify

});

好了,大功告成,现在就可以开始愉快的使用 Vuetify 了,总体来说,我比较喜欢 Vuetify ,很有设计感细节颜色设计的非常棒。 javaScript在线正则表达式测试,本程序纯粹是为了学习Vue、webpack、Vuetify,一个重复制造轮子的的实践。欢迎大家交流学习。

项目演示地址: JavaScript_RegExp

项目仓库地址:

JavaScript_RegExp___gitee JavaScript_RegExp___github

Vue快速学习笔记(8)webpack4.X配置Vue开发打包环境

J.sky 2020-03-05 15:16:08 webpack

webpack 简介

webpack是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具. webpack可以完美实现资源的合并、打包、压缩、混淆等诸多功能。

npm修改下载源

  • 先安装 node.js ,这个大家百度一下,介绍的太多了,这里不敷衍了。安装了 node.js 后就集成了npm * npm 如果不修改下载源,下载会很慢的,所以推荐修改为淘宝的源。修改方式推荐使用 nrm

安装:

npm install -g nrm //全局安装

nrm ls 列出所有源, nrm use taobao 切换淘宝源,至此我们可以无忧的下载了。

另外,也有可能出现在没有切换源的时候,连 nrm 都下载不下来的时候,比如我。 那么我们先临时切换npm的下载源:

npm config set registry https://registry.npm.taobao.org

测试是否改变了源。

npm config get registry

安装及初始化webpack

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

一些npm的安装命令

npm i module_name          # 安装模块到项目目录下 npm i module_name -g        # -g 的意思是将模块安装到全局,具体安装到磁盘哪个位置,要看 npm config prefix 的位置。 npm i module_name -S(-save)      # --save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖。 npm i module_name -D(--save-dev)  # --save-dev 的意思是将模块安装到项目目录下,并在package文件的devDependencies节点写入依赖。

初始化webpack

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

通过上边的终端魔法,我们成功的初始化了一个前端项目。 我们现在的目的是配置webpack成为一个模块化的 Vue 前端开发项目,来看看我们需要做哪些事情。

webpack打包这里总结为:

  1. 配置文件 config.js 用来管理配置:开发环境,loader模块,插件,打包等。
  2. package.json ,管理各种包依赖插件,还有添加脚本命令。
  3. 添加并配置各种loader,使webpack能有处理更多文件的能力。
  4. 添加并配置各种插件,可以处理生产打包中的一些额外功能。

webpack的配置文件

关于webpack的配置文件修改,我推荐安装 webpack-merge 实现配置文件合并.

假设:

webpack.common.js 公共部分文件 webpack.dev.js 开发环境 webpack.prod.js 生产环境

const merge = require('webpack-merge');//导入包
const common = require('./webpack.common');//导入公共配置文件
。。。。。。config
module.exports=merge(common,devConfig);//合并配置文件

使用起来很方便,这样就可以方便的配置多种开发调试及生产环境。

配置文件的结构目前来说分为四大部分:

  1. 入口entry
  2. 出口output
  3. 模块module
  4. 插件plugins

配置文件结构展示图:

输入图片说明

如果详细讲解webpack的各种配置讲个几天几夜也是说不完的,还是看代码研究吧。 配置的重点在于模块和插件的选项,这我就不贴代码了,如果你有兴趣可以clone仓库里的代码研究一下。 本仓库集成了最基础的模块和插件,包括处理:js es6 css less sass 图片 Vue vue-router,配置文件设置了公共文件,打包在此基础上做了开发和生产两种打包模式。

基于webpack4.X创建的Vue开发环境基础搭建的项目,地址如下:

仓库源码下载:

一些其他注意事项

由于现在新版本的 clean-webpack-plugin 插件引入已经改为: const { CleanWebpackPlugin } = require('clean-webpack-plugin'); new CleanWebpackPlugin(),//清理目录 而且不用加入目录数组['dist']

使用 webpack-dev-server

npm install --save-dev webpack-dev-server

如果报错 npm ERR! Failed at the webpack-demo@1.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

使用babel处理高级JS语法

npm i -D babel-core@6.26.3 babel-loader@7.1.4 babel-preset-env@1.6.1

  1. webpack.config.js 中添加相关loader模块,其中需要注意的是,一定要把 node_modules 文件夹添加到排除项: { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
  2. 在项目根目录中添加 .babelrc 文件,并修改这个配置文件如下: { "presets": ["env"] }
  3. 注意:语法插件 babel-preset-es2015 可以更新为 babel-preset-env ,它包含了所有的ES相关的语法;

Vue快速学习笔记(5)使用路由vue-router(1)

J.sky 2020-02-12 19:03:02 Vue

在Vue中使用路由vue-router

  1. html 中导入vue-router.
  2. 编写 router-link router-view 标签代码
  3. JavaScript 中编写模板对象,定义路由对象及创建Vue实例。

具体代码参考:

<div id="app">
    <!-- 使用router-link定义组件导航 -->
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>

    <!-- 使用 router-view 显示匹配的组件 -->
    <router-view></router-view>
</div>

<script>
    const login = {
        template: '<h1>登录组件</h1>'
    }
    const register = {
        template: '<h1>注册组件</h1>'
    }

    // 创建一个路由示例,通过routers属性来匹配规则
    const routerobj = new VueRouter({
        routes: [{
                path: '/',
                redirect: '/login'
            },
            {
                path: '/login',
                component: login
            },
            {
                path: '/register',
                component: register
            }
        ]
    });
    // 穿件Vue实例
    var vm = new Vue({
        el: '#app',
        router: routerobj
    });
</script>

Vue快速学习笔记(4)Vue组件中的数据传递

J.sky 2020-02-11 15:33:53 Vue

Vue组件中的数据传递

父组件向子组件传递数据:

  • 使用 props 属性来定义子组件的数据。
  • 使用 v-bind 指令在组件中可以使父组件的数据传递到子组件中。

示例代码

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="assets/plugins/vue.js"></script>
<template id="mh">
    <h1> {{finfo}}</h1>
</template>

<div id="app">
    <mh finfo="子组件的数据"></mh>
    <mh :finfo="msg"></mh>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg:"这是父组件Vue实例中传来的消息。"
        },
        components:{
            mh:{
                template:"#mh",
                props:['finfo']
            }
        }
    });
</script>

子组件向父组件传值

Vue快速学习笔记(3)Vue的组件

J.sky 2020-02-04 15:08:07 Vue

Vue中的组件

首先注册组件:

    Vue.component("my-btn", {
        data:function() {
            return {
                count:0
            }
        },
        template:"#mybtn"
    });

需要一个组件名称和组件的代码模板,组件中的数据和Vue实例的数据不同,一个组件的data选项必须是一个函数。

定义模板

<template id="mybtn">
    <button v-on:click="count++">已经点击了{{ count }}次!</button>
</template>

编写Vue实例,完整代码如下:

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="assets/plugins/vue.js"></script>
<template id="mybtn">
    <button v-on:click="count++">已经点击了{{ count }}次!</button>
</template>

<div id="app">
    <my-btn></my-btn>
    <my-btn></my-btn>
    <my-btn></my-btn>
</div>

<script>
    Vue.component("my-btn", {
        data:function() {
            return {
                count:0
            }
        },
        template:"#mybtn"
    });

    vm = new Vue({
        el:'#app'
    })

</script>

如上,就可以实现一个全局的组件注册,可以重复使用。

Vue快速学习笔记(2)Vue中的监听与计算属性

J.sky 2020-02-01 10:31:26 Vue

Vue中的监听

watch 用来监听 Vue 实例中数据的变化,然后可以出发一个事件。 例如,反转字符串:

<script src="assets/plugins/vue.js"></script>
<div id="app">
    <input type="text" v-model="vt">
    <p v-text="nvt"></p>
</div>


<script>
   var vm = new Vue({
        el:"#app",
        data:{
            vt:"",
            nvt:""
        },
        watch: {
            vt:function(val){
                this.nvt=this.vt.split('').reverse().join('')

            }
        },
    })

</script>

除了 watch 选项之外,您还可以使用命令式的 vm.$watch API。

Vue中的计算属性

计算属性和监听有些相似,有的时候作用都差不多吧。

下边的例子就是采用Vue的计算属性,

<script src="assets/plugins/vue.js"></script>

<div id="app1">
    <p>计算属性</p>
    <input type="text" v-model="vt">
    <p v-text="rtvt"></p>
</div>


<script>


    var vm1 = new Vue({
        el :"#app1",
        data:{
            vt:""
        },
        computed: {
            rtvt:function(){
                return this.vt.split("").reverse().join("")
            }
        },

    })

</script>

感觉计算属性要比监听简单直观些。