这是我参与更文挑战的第9天，活动详情查看：更文挑战

一、搭建环境

1、安装node.js;

2、搭建vue的开发环境，安装vue的脚手架工具，官方命令行工具；

npm install --global vue-cli

3、注意：必须先安装node.js,否则无法使用；

二、创建项目

这里介绍的是命令行的创建项目的方法：

首先必须先cd到对应的一个项目里面，然后

vue init webpack vue-demo01
cd vue-demo01
cnpm install  /  npm install      

npm run dev  // 创建成功后，cd到vuedemo01，然后运行项目

cnpm：淘宝镜像 npm.taobao.org/

npm install -g cnpm --registry=registry.npm.taobao.org 【下载包的速度更快一些】

三、另一种创建项目的方式

1、vue init webpack-simple  vue-demo01

2、cd vue-demo01

3、cnpm install    /   npm install       

4、npm run dev

如果要卸载老版本的vue,则在命令中写入：

npm uninstall vue-cli-g 或 yarn global remove vue-cli

四、另一种创建项目的方式

1、npm install -g @vue/cli
2、cd vue、vue create vuedemo03

五、vue cli3 图形化界面创建项目

1、cd到目录里面：cd vue;

2、vue ui;

3、进入页面创建项目。

六、运行文件夹中没有node_modules(项目的各种依赖)的vue文件夹

1、安装脚手架 npm install -g cnpm --registry=registry.npm.taobao.org

2、cnpm install；

3、npm run dev跑项目；

4、如果未自动打开项目，就在浏览器中手动输入地址。

七、vue常用指令

v-if指令

条件渲染指令，它根据表达式的真假来删除和插入元素

基本语法：

v-if="expression"

expression是一个返回布尔值的表达式，表达式可以是一个布尔属性，也可以是一个返回布尔的运算式。

v-show指令

v-show不管条件是否成立，都会渲染html,而v-if只有条件成立才会渲染

v-else指令

v-else指令与v-if或者v-show同时使用，v-if条件不成立则会显示v-else内容

v-for指令

v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似

v-for="item in list"

list是一个数组，item是当前遍历的数组元素

v-for="(item,index) in list"其中index是当前循环的索引，下标从0开始

v-bind指令

v-bind动态地绑定一个或多个特性，可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），如v-bind: class

class可以和v-bind:class同时存在，也就是说有class了，再添加v-bind:class并不会覆盖原来的样式类，而是在原来基础上添加新的类名

可用:替代

v-bind:class="isLogo?'':'product'" = ：class="isLogo?'':'product'"

Vue的基本介绍与使用