携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天,点击查看活动详情 >> Vue CLI安装

1.安装环境

1.下载nodejs

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

2.配置nodejs环境变量

windows系统:
        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 "/Users/chenyannan/dev/nodereps"
        npm config set prefix "/Users/chenyannan/dev/nodereps"

7.验证nodejs环境配置

npm config ls
//验证
; userconfig /Users/chenyannan/.npmrc
cache = "/Users/chenyannan/dev/nodereps"
prefix = "/Users/chenyannan/dev/nodereps"
registry = "https://registry.npm.taobao.org/"

2.安装脚手架

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脚手架第一个项目

vue init webpack 项目名

2.创建第一个项目

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加锁
-README.md         ----> 项目说明文件

3.如何运行在项目的根目录中执行

        npm start 运行前端系统

4.如何访问项目

        http://localhost:8081    

5.Vue Cli中项目开发方式

 注意: 一切皆组件   一个组件中   js代码  html代码  css样式

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

4.如何开发Vue脚手架

注意:在Vue cli 中一切皆组件

15.在脚手架中使用axios

15.1 安装axios

# 1.安装axios
	npm install axios --save-dev

# 2.配置main.js中引入axios
	import axios from 'axios';

	Vue.prototype.$http=axios;

# 3.使用axios
	在需要发送异步请求的位置:this.$http.get("url").then((res)=>{}) this.$http.post("url").then((res)=>{})

16.Vue Cli脚手架项目打包和部署

# 1.在项目根目录中执行如下命令:
	  vue run build

		注意:vue脚手架打包的项目必须在服务器上运行不能直接双击运行

# 2.打包之后当前项目中变化
	 	在打包之后项目中出现dist目录,dist目录就是vue脚手架项目生产目录或者说是直接部署目录

# 3.

this.$route.query.id//取路由的id
this.$router.push("/路径")//切换路由

11.打包

12.vue vue-router 路由

部分空缺以后填坑吧