项目打包使用命令：npm run build

打包完成后生成dist文件夹，部署到服务器即可

webpack打包配置相关

以及环境变量和模式配置

vue2.x入门

创建工程的两种方法：

方法一：vue create 命令创建

cd 到某需要创建工程的目录

创建名为hello-world的项目：vue create hello-world 

方法二：ui界面创建

使用命令vue ui

并用浏览器打开对应http:localhost:8080地址

选择Create创建项目，选择Create a new project创建新项目

项目创建成功可查看左侧边栏一些插件、依赖、目录、任务等

可视化运行，点击运行，同npm service

工程项目目录结构：主键目录、package.json

先安装node和npm

然后安装vue-cli工具： npm install -g @vue/cli 

查看vue-cli版本：vue --version

条件渲染，定时触发或其它满足的条件触发等。

列表渲染

Classs与Style绑定

v-if ，v-else，v-else-if 示例：

v-show 条件满足才显示

v-for简单基础使用，对上数组输出

v-for与条件渲染一起过滤使用

v-for与v-show一起过滤使用

触发computed的条件是本实例里面的data数据发生变化。

如果只有外部arr对象变化不会触发改变。

监听属性，监听器，异步场景，异步请求返回触发：watch

计算属性，数据联动：computed

IDE：

WebStorm

VSCode

nvm

课程主要内容

aaaa

部署命令：npm run build；

new Router({

// 路由激活添加属性

linkActiveClass: 'styleName'

})

git clone

git status

git add .

git commit -m ‘first commit’

git remote -v

git push origin master

git branch -a

git checkout -b dev

git push origin dev

git checkout master

git merge dev

git branch -D dev

git push origin :dev

git reset --hard head^

git log

git reflog

git reset --hard HEAD@{1}

通过浏览器调试工具network 下的模拟网络，进行加载loading 或者加载效果 的测试，如：设置slow 3g 模拟网络慢进行调试。

浏览器console 输出调试，可设置全局变量调试，方法如下：

mounted(){
window.vue=this;

}

chrome vue开发插件

1. git clone git@github.com:kanlidy/hellogit.git 创建一个空仓库

2. git status 

3. git branch -a

4. git branch

5. touch test.txt

6. git add.待处理待提交的状态

7. git commot -m "初次提交"

8. git remote -v

9. git push origin dev

10. git checkout master

11. ls   

1. 定义store，引入Vuex文件

2. 定义state和mutations

3. 引入store文件

4. 在对象中引用store

5. .commit
   

1. cd 进入文件夹

2. Vue create 文件名

3. 敲空格选择选项

4. ctrl+c取消安装

5.  npm install --global vue-cli

6. cnpm install -g vue-cli

7. npm install -g @vue/cli升级

8. vue ui
   

<div v-for="items in list"  v-bind:style='styleMsg'{{items.name}}</div> 

>

el,元素绑定

var app = new Vue({

el:"#app"

data:{

    msg: "hello vue",

    another:"another hello vue"

},

watch{

    msg:function(newval,oldval){

    console.log(newval)

    console.log(oldcal) 

    }

},

computed:{

    msg1:function(){

    return"computed"+this.msg+","+this.anthor}

},

})

{{msg}}插入变量，插值语法

v-bind；

onclick；

v-if；

：herf；

{{msg}}

new Vue ({

el:'#app',

data:{

    masg:'hello vue!!'

}})

绑定元素

上BootCDN上查找

单独页面demo  

没有明白

赞

学习时间计划

vue2.x框架 20%

常用知识点

模块语法，v-bind属性绑定，时间绑定

条件渲染，列表渲染，class 与style绑定

vue核心技术 30%

认识vue-cli工具，vue代码规范

vue组件的调试方法。

vue-router,vuex[状态管理]

基成vue,在项目中使用 30%

介绍workflow工作流

单页面demo（动态表单，列表动态展示）

使用Cli工具，开发常见的应用组件

知识点——导图：

知识点——导图：

git 使用