vue1装环境

不念不忘少年蓝@ 2022-06-05 03:45 129阅读 0赞

# Vue-cli安装流程以及部分npm命令 #

1.  百度[Node.js][]下载并安装
2.  可以一直下一步 但是要记住安装目录
3.  进入安装目录即Node.js文件夹内
4.  按住`shift`\+鼠标右键
5.  选择在此处打开命令窗口
6.  输入`node -v`//检查node版本至少为4以上
7.  输入`npm config set registry http://registry.npm.taobao.org`
8.  输入`npm install vue-cli -g`//在全局安装`vue-cli`的依赖
9.  安装完毕后输入`vue`检查`vue`是否安装完毕
10. 输入`vue list`查看可安装的`vue`模板
11. 输入`vue init webpack XXX`//创建模板为`webpack`的`vue`项目名字为`XXX`
12. `Project name XXX`//项目名
13. `Project desrciption XXX XXX`//项目描述
14. `Author` //创建者的名字/邮箱（可不填）
15. 以下选项输入Y/N
16. `UseESLint to lint your code?`//是否启用ESLint语法检查（推荐N）
17. `Pick an ESlint preset`//填N
18. `Setup unit tests with Karma + Mocha?`//是否启用单元测试（填N）
19. `Setup e2e tests with Nightwatch`//填N
20. 按提示输入`cd XXX`进入当前目录下（即项目目录）
21. 输入`npm install` 安装项目模块依赖（较久）
22. 安装完成
23. 输入`npm run dev` //运行项目

# npm指令 #

*  `npm -v`查看npm版本
 *  `npm install npm -g`安装npm至全局（windows）
 *  `cnpm install npm -g`使用国内镜像安装npm至全局

*  `npm run dev`运行项目

# Vue-cli傻瓜教程（语法篇） #

1.  简单的介绍
2.  简单的代码
3.  router-link
4.  v-bind
5.  表达式
6.  ES6
7.  v-for
8.  v-on
9.  常用钩子
10. 数据
11. 资源

--------------------

## 简单的介绍 ##

*  .vue文件只有三个根标签
 *  分别是`template`、`script`、`style`
 *  分别对应`html`、`js`、`css`

--------------------

## 简单的代码 ##

html：

<router-link :to="pathUrl">{
        {msg}}</router-link>
      
       
        1

js：

export default {
        name: 'Index',
        data() {
          return {
            msg: 'Vue-cli',
            pathUrl: '/workflow'
          }
        }
      }
      
       
        1
        2
        3
        4
        5
        6
        7
        8
        9

css:

--------------------

## router-link[走你][Link 1] ##

<router-link to="/workflow">workflow</router-link>
      
       
        1

> `router-link`是一个vue自带的标签，用于路由的跳转   
> 渲染后为`a`标签   
> 但不同的是该标签不支持`target="_blank"`属性   
> 而且是用来跳路由的即把目标地址写在`to`后

--------------------

## v-bind[走你][Link 2] ##

html:

<input type="text" placeholder="msg">
      
       
        1

js:

export default { name: 'demo', data() { return { msg: '双向绑定' }
        }
      }
      
       
        1
        2
        3
        4
        5
        6
        7
        8

> `:`为`v-bind`的缩写，常用于双向绑定

--------------------

## 表达式 ##

html:

<div>{ { msg}}</div>
      
       
        1

js:

export default { 
        name: 'demo',
        data() { return { msg: '双向绑定' }
        }
      }
      
       
        1
        2
        3
        4
        5
        6
        7
        8

--------------------

## ES6[走你][Link 3] ##

import 组件名 from '地址'
      
       
        1

export default { 
        name: 'demo',
        data() { return { }
        }
      }
      
       
        1
        2
        3
        4
        5
        6
        7
        8

> vue里使用了ES6里头的`import`和`export`   
> 用于组件之间的导入和导出

--------------------

## v-for[走你][Link 4] ##

html:

<ul> <li v-for="tmp in list"> <router-link :to="tmp.pathUrl"> <div>{ { tmp.msg}}</div> <div> <img :src="tmp.pic" alt="no found"> </div> </router-link> </li> </ul>
      
       
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10

js:

export default { name: 'demo', data() { return { list: [ { num : 1, msg : '11', pic : '../img/1.jpg', pathUrl : '/demo1' },
              { num : 2, msg : '22', pic : '../img/2.jpg', pathUrl : '/demo2' }
            ]
          }
        }
      }
      
       
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21

> `v-for`等同于`js`里面的`for`循环   
> 通常用于[列表渲染][Link 5]也可以通过一个对象的属性   
> 因为vue的机制，每个`v-for`后面需要加带一个属性`key='xxx'`以区分多个遍历对象

--------------------

## v-on[走你][Link 6] ##

html:

<button v-on:click="toDemo">toDemo</button>
      
       
        1

<button @:click="toDemo">toDemo</button>
      
       
        1

<button @click.prevent="toDemo">toDemo</button>
      
       
        1

js:

methods: {
          toDemo() {
            console.log(toDemo);
          }
        }
      
       
        1
        2
        3
        4
        5

> `v-on`用于[绑定事件监听][Link 6]   
> 缩写为`@`，阻止默认事件`prevent`   
> `methods`与`data`同级

--------------------

## 常用钩子[走你][Link 7] ##

> 什么是勾子呢，先看看一张图压压惊

![这里写图片描述][SouthEast]

> 看完是不是更不淡定了，这是一张vue的生命周期图   
> 红色框框就是钩子了，当你需要在某个状态下访问或者操作数据时你就可以用上钩子   
> 常用的钩子有这么几个

created
      
       
        1

> 实例创建后使用

mounted
      
       
        1

> 整个视图都渲染完毕后使用

updated
      
       
        1

> 数据更改导致的 DOM 重新渲染时使用

activated
      
       
        1

> 组件激活时使用

destroyed
      
       
        1

> 实例销毁后调用

--------------------

## 数据 ##

*  data
 *  props
 *  computed
 *  methods
 *  watch

> `data`通常是以一个`function`所需的参数写在`return`的对象里

data（）{ return { name : 'demo' }
    }
      
       
        1
        2
        3
        4
        5

> `props`可以是数组或对象，用来接收来自父组件的参数

props: ['fathers']
      
       
        1

> `computed`是一个计算属性

data: { a: 1 },
      computed: { aDouble: function () { return this.a * 2 },
      }
      
       
        1
        2
        3
        4
        5
        6

> `methods`作用等同于`script`标签里面存放方法

methods: {
        plus: function () { 
          this.a++
        }
      }
      
       
        1
        2
        3
        4
        5

> `watch`vue的监听属性

data() {
        return {
            num: 1
        }
    },
    watch : {
        num (val) {
            if(val!===1){
                console.log('不为1');
            }else{
                console.log('1')；
            }
        }
    }
    
      
       
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15

--------------------

## 资源 ##

*  components

> `components`当`import`进一个组件时需要在里边注册后才能使用

import demo from 'demo'
    export default { 
        data () {},
        components : {
            demo
        }
    }
      
       
        1
        2
        3
        4
        5
        6
        7

[Node.js]: http://nodejs.cn/download/
[Link 1]: https://cn.vuejs.org/v2/guide/migration-vue-router.html#v-link-%E6%9B%BF%E6%8D%A2
[Link 2]: https://cn.vuejs.org/v2/api/#v-bind
[Link 3]: http://es6.ruanyifeng.com/#docs/module
[Link 4]: https://cn.vuejs.org/v2/guide/list.html#%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E7%9A%84-v-for
[Link 5]: https://cn.vuejs.org/v2/guide/list.html
[Link 6]: https://cn.vuejs.org/v2/api/#v-on
[Link 7]: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
[SouthEast]: /images/20220605/172220835aa14c64b15258b45c90ca15.png