vue-cli vue脚手架安装及配置

---

一、vue 环境安装

1. 下载node.js
   http://nodejs.cn/download/
   windows系统: .msi 安装包(exe)指定安装位置 .zip（压缩包）直接解压缩指定目录
   Mac os 系统: .pkg 安装包格式自动配置环境变量 .tar .gz(压缩包) 解压缩安装到指定目录

2. 配置nodejs环境变量
   windos系统：
   1. 计算机右键属性 -----> 高级属性 -----> 环境变量 添加如下配置：
   NODE_HOME = nodejs安装目录
   PATH = xxxx;%NODE_HOME%
   2. macOS 系统
   推荐使用.pkg 安装直接配置node 环境

3. 验证nodejs环境是否成功
   node -v

4. npm介绍
   node package mangager nodejs包管理工具 前端主流技术 npm 进行统一管理
   maven 管理java后端依赖 远端仓库(中心仓库) 阿里云镜像
   npm 管理前端系统依赖 远端仓库(中心仓库) 配置淘宝镜像

5. 配置淘宝镜像
   npm config set registry https://registry.npm.taobao.org
   npm config get registry

6. 配置npm下载依赖位置
   windows：
   npm config set cache “D:\nodereps\npm-cache”
   npm config set prefix “D:\nodereps\npm_global”
   Mac OS:
   npm config set cache ‘/Applications/developerKits/noderegistry’
   npm config set prefix ‘/Applications/developerKits/noderegistry’

7. 验证nodejs 环境配置
   npm config ls
   

二、安装脚手架

0. 卸载脚手架
   npm uninstall -g @vue/cli //卸载3.x 版本脚手架
   npm uninstall -g vue-cli //卸载2.x 版本脚手架

1. VUE Cli 官方网站
   https://cli.vuejs.org/zh/guide/

2. 安装vue Cli
   npm install -g vue-cli

3. 第一个vue脚手架项目
   1). vue init
   vue init webpack 项目名称
   2). 创建第一个项目
   vue init webpack hello //然后一直确定即可

项目目录
hello ----->项目名
-build ----->用来使用webpack打包使用build依赖
-config ----->用来做整个项目配置目录
-node_modules->用来管理项目中使用依赖
-src ----->用来书写vue的源代码[重点]
+assets ----->用来存放静态资源[重点]
components–>用来书写vue组件[重点]
router ----->用来配置项目中路由[重点]
App.vue ----->项目中根组件[重点]
main.js ----->项目中主入口[重点]
-static ----->其他静态
-.babelrc ----->将es6语法转为es5运行
-.editorconfig -->项目编辑配置
-.gitignore -----> git版本控制忽略文件
-.postcssrc.js —>源码相关js
-index.html -----> 项目主页
-package.json --> 类似于pom.xml 依赖管理 jquery 不建议手动修改
-package-lock.json-> 对package.json 加锁
-REMADME.md -> 项目说明文件

4. 如何运行项目的根目录中执行
   npm start 运行前端系统

5. 如何访问
   http://localhost:8080

6. vue cli中项目开发方式
   注意：一切皆为组件。一个组件中 js代码 html代码 css样式

   1）、vueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块，日后可以将多个组件和到一起组成一个前端系统
   2）、日后在使用Vue Cli 进行开发时不再书写html，编写的是一个组件（组件后缀，.vue结尾的文件），日后打包时 vue Cli 会将组件编译成运行的html文件

三、如何开发vue脚手架

`注意：在Vue Cli 中一切皆组件`

四、在脚手架中使用axios

1. 安装axios
   npm install axios --save-dev
2. 配置namin.js 中引用axios
   import axios from ‘axios’
   Vue.prototype.$http = axios;
3. 使用axios
   在需要发送一步请求的位置：this.$http.get("url").then((rres)=>)this.$http.post(“url”).then((res) => {})