VUE脚手架安装流程

使用Vue脚手架创建Vue项目：
#1，在当前文件夹对应的cmd窗口中进行以下操作
#2，电脑已经安装过node.js
#3，判断它是否安装成功
node -v # 查看node版本
npm -v # npm版本
4，安装Vue脚手架：每个电脑配置一次即可

#直接使用npm，网速比较慢，使用淘宝镜像源提供的cnpm

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

#使用cnpm安装vue脚手架
cnpm install -g vue-cli

#查看Vue脚手架版本
vue -V

创建VUE项目以及页面展示的基本流程
#1，1. 初始化项目
vue init webpack vue01 # 在文件夹对应的cmd窗口使用， 输完回车

#2. 接下来选择配置项目信息
? Project name (vue01) #项目名称 默认回车即可
? Project description (A Vue.js project) # 项目描述 默认回车即可
? Author # 作者 默认回车即可
Vue build (Use arrow keys) # 打包项目选项 默认回车即可
? Install vue-router? (Y/n) # 是否安装路由 输入y
? Use ESLint to lint your code? (Y/n) # 是否使用eslint检测代码， 输入n
? Set up unit tests (Y/n) # 是否使用测试单元 输入 n
? Setup e2e tests with Nightwatch? # 输入n
? Should we run npm install for you after the project has been created? (recommended)
Yes, use NPM # 是否使用npm包管理工具
Yes, use Yarn # 是否使用yarn包管理工具
❯ No, I will handle that myself # 不，我使用我自己的工具，想使用cnpm选第三个选项

#3，进入项目文件夹，在终端安装必备的包
cd vue01 # 首先进入项目文件夹
cnpm install # 如果上面选的是第三个选项， 这一步是必须的，使用cnpm工具，安装一些必备的项目包,
# 如果上面选的是npm，这一步没必要，当然多运行一遍，也没问题

#4，在终端运行项目
cnpm run dev # 两个命令任意一个即可，启动项目
npm run dev

#5，在浏览器项打开项目
在浏览器的地址栏直接输入: http://localhost:8080

#6 安装axios
cnpm install axios

#7 找到 src 里的main.js 将axios注册到全局
main.js:

// The Vue build version to load with the import command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
import axios from ‘axios’ 配置全局跨域 1
Vue.config.productionTip = false
Vue.prototype.axios=axios 配置全局跨域 2
/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,
components: { App },
template: ‘’
})

如果嫌vue自带图标麻烦 可以在 src App.vue 中将logo去掉

在 src components 中新建vue文件

…

将vue文件注册到路由里 src router index.js

import xxx from ‘@/components/xxx.vue’ 名字可自己定义

Vue.use(Router)

export default new Router({
routes: [
{
path: ‘/’,
name: ‘xxx’,
component: xxx
}
]
})

v-for
{{i}}

axios
// 1get传值
this.axios.get(’/api/’,{}).then(res=>{})
// 2.post
this.axios.post(’/api/xxx/’,{}).then(res=>{})
// 3 综合
this.axios({
url:’’,
method:’’,
数据
}).then(res=>{
//
})