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环境上的
2. cmd命令行:
node -v //显示node版本 v10.15.3
npm -v //显示npm包管理器版本 6.4.1
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
5. 创建一个基于 webpack 模板的新项目
vue init webpack my-vue
这里需要进行一些配置,默认回车即可
cd my-vue
cnpm install //下载项目模板依赖,不然运行报错
cnpm run dev //运行
// cmpm build dev 编译打包
运行后就可访问了
这样我么就可以使用vue愉快的操作数据了,而不是操作DOM节点,这点要转换过来!