### Vue组件中的数据传递

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

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

示例代码

    
    <script src="https://suiyan.cc/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快速学习笔记(4)Vue组件中的数据传递

### 在Vue中使用路由vue-router

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

具体代码参考：


    <div id="app">
        
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>

        
        <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快速学习笔记(5)使用路由vue-router(1)


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

配置文件结构展示图：

![输入图片说明](https://suiyan.cc/assets/images/blog/Snip20200306_2.png)



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

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

## 仓库源码下载：

+ [github](https://github.com/bosichong/webpack4.X_vue_demo.git)
+ [开源中国码云镜像gitee](https://gitee.com/J_Sky/webpack4.X_vue_demo.git)

## 一些其他注意事项

由于现在新版本的 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 

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

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

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


### conda 常用的命令。


1） conda list  查看安装了哪些包。

2） conda env list  或  conda info -e  查看当前存在哪些虚拟环境

3） conda update conda  检查更新当前conda

4） conda --version  查询conda版本

5） conda -h  查询conda的命令使用

activate // 切换到base环境

conda deactivate //退出虚拟环境

activate learn // 切换到learn环境

conda create -n learn python=3 // 创建一个名为learn的环境并指定python版本为3(的最新版本)

conda env list // 列出conda管理的所有环境

conda list // 列出当前环境的所有包

conda install requests 安装requests包

conda remove requests 卸载requets包

conda remove -n learn --all // 删除learn环境及下属所有包

conda update requests 更新requests包

conda env export > environment.yaml // 导出当前环境的包信息

conda env create -f environment.yaml // 用配置文件创建新的虚拟环境

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

在Vue中使用路由vue-router

相关文章

那年今日