一，基础入门
1，安装vue-cli
安装vue-cli的前提是你已经安装了npm，安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和版本情况。
如果npm没有问题，接下来我们可以用npm 命令安装vue-cli了，在命令行输入下面的命令
npm install vue-cli -g
-g :代表全局安装。如果你安装时报错，一般是网络问题，你可以尝试用cnpm来进行安装。安装完成后，可以用vue -V来进行查看 vue-cli的版本号。注意这里的V是大写的。
如果vue -V的命令管用了，说明已经顺利的把vue-cli安装到我们的计算机里了。
2，初始化项目
使用命令行来初始化一个vue-cli脚手架项目（常用初始化命令如下）
vue init webpack projectname
格式
vue init <template-name> <project-name>
格式说明
init：表示我要用vue-cli来初始化项目
<template-name>：表示模板名称，vue-cli官方为我们提供了5种模板，
- webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
- webpack-simple-一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。
- browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
- browserify-simple-一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。
-simple-一个最简单的单页应用模板。
<project-name>：标识项目名称，这个你可以根据自己的项目来起名字。
在实际开发中，一般我们都会使用webpack这个模板。
执行命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了！
- Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest
- Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
- Author：作者，如果你有配置git的作者，他会读取。
- Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
- Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。
- setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
- Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。
然后项目就构建完成了！
- cd vuecliTest 进入我们的vue项目目录
- npm install 装我们的项目依赖包，也就是安装package.json里的包，如果你网速不好，你也可以使用cnpm来安装
- npm run dev 发模式下运行我们的程序
3，npm run 命令的区别
npm run dev：在本地调试，把项目在本地运行起来
npm run build：打包项目
我们在本地调试的时候只要命令行执行npm run dev就可以把这个项目跑起来，但是现在我们要把他放到服务器上的话用npm run build命令就可以啦。
在projectname项目目录下执行 npm run build ，打包项目，打包完成之后，我们就可以像打开静态网页一样打开我们完成的项目。
下图为打包生成的dist文件夹，其中index.html为入口文件
这时你打开了index.html文件，发现网页一片空白，打开F12发现console报了几个错误
这是因为引用资源的路径问题，我们只要在下图的地方修改一下再打包就可以了，需要修改的文件在项目目录下的config文件夹里的index.js文件中
改完，再次执行npm run build，然后打开index.html成功访问vue脚手架项目。
4，使用图形化界面创建vue-cli项目
运行 vue ui 命令可以打开 vue项目管理器（视图界面），可以根据需求自定义创建项目，如下图
二，开发
1，vue-cli引入axios
终端进入到vue-cli项目的根目录，执行命令行，安装axios（下面两个都需要）
npm install axios
npm install --save axios vue-axios
然后在 main.js 中引入
import Vue from 'vue'
import App from './App'
import router from './router'
/* 引入axios开始 */
import vueAxios from 'vue-axios'
import axios from 'axios'
Vue.use(vueAxios,axios)
/* 引入axios结束 */
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
在 HelloWorld.vue 中修改
<template>
<div>
<!-- template内容开始（外围必须包裹一个div，因为组件只允许有唯一的一个根元素） -->
<button v-on:click="sendRequest">发送axios请求</button>
<div v-show="showText">
{{msg}}
</div>
<!-- template内容结束 -->
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
showText:false,
msg: ''
}
},
methods:{
sendRequest(){
// axios请求开始
this.axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response=>{
this.msg = response.data.bpi
console.log("axios请求成功");
})
.catch(function (error) {
console.log(error)
})
// axios请求结束
this.showText=true
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- style加上scoped表示此css样式只在本模块中有效 -->
<style scoped>
</style>
npm run dev启动本地项目，http://localhost:8080进入项目首页
点击按钮发送axios请求回显到msg中
2，export default 和 export
- Vue 是通过 webpack 实现的模块化，因此可以使用 import 来引入模块
- export 用来导出模块，Vue 的单文件组件通常需要导出一个对象，这个对象是 Vue 实例的选项对象，以便于在其它地方可以使用 import 引入。而 new Vue() 相当于一个构造函数，在入口文件 main.js 构造根组件的同时，如果根组件还包含其它子组件，那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例，最终形成一棵组件树。
export 和export default 的区别在于：export 可以导出多个命名模块，例如
//demo1.js
export const str = 'hello world'
export function f(a){
return a+1
}
对应的引入方式
//demo2.js
import { str, f } from 'demo1'
export default 只能导出一个默认模块，这个模块可以匿名，例如
//demo1.js
export default {
a: 'hello',
b: 'world'
}
对应的引入方式
//demo2.js
import obj from 'demo1'
引入的时候可以给这个模块取任意名字，例如 "obj"，且不需要用大括号括起来。
3，vue-cli引入vue-router路由
（1）在package.json文件中的dependencies中添加路由及其版本，如果有的话可以忽略。
"dependencies": {
"axios": "^0.20.0",
"vue": "^2.5.2",
"vue-axios": "^2.1.5",
"vue-router": "^3.4.3"
}
（2）npm安装
npm install vue-router --save
（3）在index.js路由文件中引入路由
import Router from 'vue-router'
Vue.use(Router)
（4）在src/components文件夹下新建test.vue等组件，然后再index.js路由文件中进行配置组件
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'/test',
name:'test',
component:test
},
{
path:'/test2',
name:'test2',
component:test2
}
]
① 经典路由案例
App.vue是脚手架的入口页面，添加路由链接
/test 和 /test2 就是上面配置好的组件
<template>
<div id="app">
<router-link to="/test">test页面</router-link>
<router-link to="/test2">test222页面</router-link>
<router-view/> <!-- 匹配到的路由组件会显示到router-view容器中 -->
</div>
</template>
效果：点击两个菜单，路由到不同的页面中
4，vue-cli跳转页面的方式
① router-link标签跳转
<router-link to='/citylist'><div class="header-right">城市</div></router-link>
<router-link :to="{path:'/partysubject',query:{id:3}}">城市</router-link>
② js方法跳转
<button @click = "func()">跳转</button>
<script>
export default{
methods:{
func (){
this.$router.push({name: '/order/page1',params:{ id:'1'}});
}
}
}
</script>
补充第二种方式
this.$router.push({path: ''/order/index''});
this.$router.push({path: '/order/page1',query:{ id:'2'}});
this.$router.push({name: '/order/page2',params:{ id:'6'}});
query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。
query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
5，vue-cli引入elementui组件
（1）命令安装elementui
npm i element-ui -S
（2）也可以在package.json中的dependencies添加依赖，然后npm install安装
装了elementui之后，在main.js中添加
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' //单独引入样式文件
Vue.use(ElementUI)
然后就可以使用elementui组件了。
6，el-upload上传组件上传成功之后获取图片信息
el-upload上传组件上传成功之后获取图片信息（图片在服务器上的存储路径等相关信息）并保存到data中，供表单提交
<el-upload
class="upload-demo"
action="/api/lifespace/uploadImage"
name="file"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:on-success="savePic"
list-type="picture"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
使用element-ui中的上传组件,upload,这个默认发送post请求,
在使用upload组件自动携带的请求方式发送
action->请求的url
on-success->请求发送成功的钩子–方法function(response, file, fileList)默认参数3个
auto-upload->是否在选取文件后立即进行上传,默认是true(选取文件即上传)
name->上传的文件字段名,默认值file,后台有时候需要发送别的字段名如image就这修改
data->上传时附带的额外参数object
disabled->是否禁用,默认false
http-request->覆盖默认的上传行为，可以自定义上传的实现–方法(当请求方式不为post可以自定义方式)
uploadSuccess(response,file,fileList){
const array=response;
console.log(array)
this.picList.push(array)
}
7，vue-cli中axios跨域的问题
在config文件夹下的index.js文件中的proxyTable字段中，作如下处理
proxyTable: {
'/api':{
target:'http://localhost:8081',//后端地址
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
}
在具体使用axios的地方，修改url如下即可
this.axios.post('/api/lifespace/saveContent',{content:contents})
.then(response=>{
console.log(response.data);
})
.catch(function (error) {
// console.log(error)
})
8，vue-cli添加全局js
填写全局config.js
function getConfig(str){
return "test";
}
//暴露的方法
//公开的方法
export default {
getConfig:getConfig,//获取 公共配置方法
}
main.js 引入当前文件
import getMyConfig from './assets/js/config'
Vue.prototype.$getMyConfig = getMyConfig;//引入配置文件
这时就可以使用了，使用方法如下（获取test字符串）
var ajaxurl = this.$getMyConfig.getConfig('ajaxurl');
9，elementUI upload上传文件时携带token
前端
<template>
<el-upload action="test" :headers="importHeaders"></el-upload>
</template>
<script>
var mytoken = localStorage.getItem('token') // 要保证取到
export default {
data () {
return {
importHeaders: {token: mytoken}
}
}
}
</script>
后端
@PostMapping("/test")
public R upload(MultipartFile file, HttpServletRequest request) {
String token=request.getHeader("token");
System.out.println("获取token==="+token);
}
10，vue-cli引入公用组件
现在components文件夹下新建一个公用组件vue文件，写好组件之后，在export default 中定义组件名称name值，这是子组件
然后在父组件中引入该子组件进行使用，如下
先自定义个标签
<top></top>
然后在script标签中引入子组件
import Top from "./Top";
然后再export default {} 中把引入的子组件赋给自定义标签即可
components:{
top:Top
}
11，vue-cli父组件向子组件传值
上面第10条只是引入了子组件，但是父组件的变量是传递不到子组件中的，因此需要如下操作
需要传入的变量在data中定义好，然后使用v-bind进行绑定到自定义标签上
<top v-bind:touxiang="touxiang" v-bind:username="username"></top>
这样父组件的变量就传到了子组件，然后子组件使用如下方式接收，这样在子组件中就可以使用变量了，例如：{{username}}
props:['touxiang','username']
作者：樊同学
