Vue-cli

Vue-cli

官方文档：点击   Vue指令

vue-cli是官方提供的快速构建这个单页面应用的脚手架。

前端开发中提到的“脚手架”是一个形象的比喻，比喻各种语言的前期工做环境。

在软件开发上（固然也包括前端开发）的脚手架指的就是：有人帮你把这个开发过程当中要用到的工具、环境都配置好了，你就能够方便地直接开始作开发，专一你的业务，而不用再花时间去配置这个开发环境，这个开发环境就是脚手架。

好比vue.js就有个vue-cli脚手架，基于node.js的开发环境，做者帮你把开发环境大部分东西都配置好了，你把脚手架下载下来就能够直接开发了，不用再考虑搭建这些工具环境。

1、安装

• 去官网 https://nodejs.org/en/download/ 下载安装,Node.js是运行在服务端的JavaScript，基于Chrome V8 引擎的。

• 打开终端 cmd : 执行node -v 若是出现版本号，证实安装node成功

• 下载完node以后，会自带包管理器npm，比如是python中 pip3包管理器。pip3 install xxx

• 使用npm全局安装vue-cli ：

  1. npm install -g @vue/cli

  2. npm install -g @vue/cli-init 拉取2.x模板

  3. 报错 npm error 能够运行下面命令npm cache clean --force && npm cache verify

  4. vue -V 有版本号 证实下载成功

• webpack-simple模板：

  1. webpack-simple 简单的配置webapck的模板

  2. vue init <模板> <项目名>

  3. vue init webpack-simple 01-simple_project

  4. cd 01-simple_project

  5. npm install

  6. npm run dev

• webpack模板：

  1. webpack复杂的webpack模块，单元测试、ESLint 热重载

  2. vue init <模板> <项目名>

  3. vue init webpack 02-webpack_project

  4. Use ESLint to lint your code?(Y/n) 选择n

  5. cd 02-webpack_project

  6. npm run dev

• 目录结构：

  1. build 里面是一些操做文件，使用npm run * 时其实执行的就是这里的文件

  2. config 配置文件，执行文件须要的配置信息

  3. src 程序员业务逻辑，资源文件 全部的组件以及全部的图片 都在这个文件夹下

  4. node_modules 项目依赖包

  5. static 静态资源

  6. package.json 依赖包的json文件

• 从新下载项目依赖：

  1. 删除package-lock.json和node_modules

  2. cd 项目

  3. npm install

• 淘宝NPM镜像 点击

• npm install -g cnpm --registry=https://registry.npm.taobao.org

• 其它下载：

  1. npm install --save axios vuex

  2. npm install --save vue-cookies

  3. npm i element-ui -S

  4. npm install jquery

  5. npm install bootstrap@3.3.7