vue学习笔记01

vue扩展插件

(1) vue-cli 脚手架

(2) vue-resource(axios) : ajax请求

(3) vue-router 路由

(4) vuex 状态管理

(5) vue-lazyload  图片懒加载

(6) vue-scroller 页面光滑动相关

(7) mint-ui : 基于vue的ui组件库(移动端)

(8) element-ui : 基于vue的ui组件库(pc端)

 

<div id="test">
    <input type="text" v-model="msg">
    <p>Hello {{msg}}</p>
</div>
<script type="text/javascript" src="../lib/vue.min.js"></script>
<script>
    var v = new Vue({
        el: "#test",
        data: {
            msg: "amdin"
        }
    });
</script>

 

使用vue-cli脚手架创建项目

1. 安装git

2. 安装nodejs

3. 在nodejs的根目录下新建两个文件夹node-cache 和 node-global 

　　D:\work\basic\nodejs\node-cache

　　D:\work\basic\nodejs\node-global

4. 配置环境变量

　   node -v 和 npm -v 

5.对npm进行配置，在cmd中分别输入：

　　npm config set prefix "D:\work\basic\nodejs\node-global"
　　npm config set cache "D:\work\basic\nodejs\node-cache"

6.设置淘宝镜像

　　npm config set registry http://registry.cnpmjs.org

 

7.安装vue-cli

　　npm install -g vue-cli

8. 在cmd命令行中输入 vue ,显示如下信息,说明vue-cli安装成功

C:\Users\zhengqinfeng>vue
Usage: vue <command> [options]

Options:
-V, --version output the version number
-h, --help output usage information

Commands:
init generate a new project from a template
list list available official templates
build prototype a new project
create (for v3 warning only)
help [cmd] display help for [cmd]