v-cli 环境搭建~系列(1)

v-cli 环境搭建

1. nodejs官网 http://nodejs.cn/ 下载安装包，无特殊要求可本地傻瓜式安装，这里选择2017-5-2发布的 v6.10.3，也可选择阿里云镜像 https://npm.taobao.org/mirrors/node/，2019/3/23更新：建议选择v10版本以上,官方最新Vue-Cli4将移除v9的支持

为什么要安装node.js呢？

因为vue框架是运行在node.js环境上的

node.js

2. cmd命令行：

node -v //显示node版本 v10.15.3

npm -v //显示npm包管理器版本 6.4.1

version

3. 使用淘宝的npm镜像： 输入npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。

4. 安装webpack

cnpm install webpack -g

webpack是啥？

首先vue是框架做完要打包给web看得懂所以使用webpack来翻译给webh，它使得我们的代码模块化。编译成我们人类看不懂的代码

4. 安装全局vue-cli脚手架

之所以要用vue-cli，是应为这个工具能帮我们搭建好我们需要的模板框架，比较简单。

npm可以下载脚手架，类似于Java中的Maven,只是个管理依赖的

cnpm install -g vue-cli

// cnpm install -g yarn

// Yarn 换源

// 查看 yarn 配置

//yarn config get registry

// 安装淘宝镜像

//yarn config set registry https://registry.npm.taobao.org

// yarm 安装脚手架

// yarn global add add vue-cli

// yarn install 下载项目模板依赖

// yarn run dev 运行

验证是否安装成功

vue -V

version

5. 创建一个基于 webpack 模板的新项目

vue init webpack my-vue

这里需要进行一些配置，默认回车即可

cd my-vue

cnpm install //下载项目模板依赖，不然运行报错

cnpm run dev //运行

// cmpm build dev 编译打包

run dev

运行后就可访问了

run

这样我么就可以使用vue愉快的操作数据了，而不是操作DOM节点，这点要转换过来！