今天完成的事情：

1.继续学vue

2.环境配置不太对。直接重新配置了一遍。

明天计划的事情：

1.推进任务

遇到的问题和收获：

1.尝试自己手写做一个demo。并记录几个环境配置问题

首先是结构。自己建立dist，src，css，images文件夹。创立进入页index.html和main.js。这些是基本的结构。

在index里写

<ul>
    <li>这是第1个li</li>
    <li>这是第2个li</li>
    <li>这是第3个li</li>
    <li>这是第4个li</li>
    <li>这是第5个li</li>
    <li>这是第6个li</li>
    <li>这是第7个li</li>
    <li>这是第8个li</li>
    <li>这是第9个li</li>
    <li>这是第10个li</li>
</ul>

import $ from 'jquery'
// const $=require('jquery');


$(function () {
    $('li:odd').css('backgroundColor','lightblue');
    $('li:even').css('backgroundColor','#D97634')
});

用jquery实现一个奇数偶数背景不同的效果

main.js里，想用import声明jquery。不过浏览器会报错。

故使用webpack进行处理，

打开控制台输入

webpack .\src\main.js .\dist\bundle.js

不过会提示错误，原因是版本问题，webpack版本过高

改用命令

webpack .\src\main.js -o .\dist\bundle.js --mode development

这样的好处是，只引用了一个js。之前的写法需要引入jquery和本地js，发起多次请求。增加负载，运行也不如这样。

整个html只引用一个bundle.js。bundle里面引用想要的包，再打包输出到bundle.js。

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

<script src="../dist/bundle.js" type="module"></script>

这个例子应该是后面直接用脚手架就能完成。现在熟悉一下webpack的使用

2.vue开发环境搭建：

①安装node.js

②安装npm

③npm install vue-g

④安装vue-cli脚手架

npm install cue-cli-g

⑤创建项目

vue init webpack 项目名称（英文）

⑥运行项目

npm run dev

另外还安装了nrm。

作用是提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址。

1.运行"npm I nrm -g"全局安装"nrm"包；

2.使用"nrm ls"查看当前所有可用的镜像源地址以及当前所使用的镜像源地址。

3.使用"nrm use npm"或"nrm use taobao"切换不同的镜像源地址。。

注意：nrm只是单纯的提供了几个常用的下载包的URL地址，并能够让我们在这几个地址之间很方便的切换，但是，我们每次装包的时候，使用的装包工具，都是npm。

可自由切换想要的地址。此处使用了cnpm。