vue创建

一.vue项目安装

1.安装node,npm

2.安装vue-cli脚手架

cnpm install vue-cli -g 或 npm install -g @vue/cli-init

3.初始化项目

vue init webpack .(.代表当前位置，name创建项目)

4.安装各种依赖

npm install

5.运行项目

npm run dev

自动打开浏览器

config→index.js→autoOpenBrowser：true;18行，端口下

二.vue项目结构

build： 项目构建(webpack)相关代码

config： 配置目录，包括端口号等。可以使用默认的

node_modules：npm 加载的项目依赖模块

src：自己写的开发项目

static：静态资源目录，如图片、字体等

.babelrc：关于es6的一些配置

.editorconfig：编辑器的一些配置

.gitignore：git这个版本控制工具忽略的文件

.postcssrc.js：定义浏览器前缀

index.html：项目的入口

package.json：项目配置文件。

README.md：项目的说明文档，markdown 格式

*src源码目录

src/assets：放置一些图片，如logo等

src/components：存放开发的组件

src/router：路由的配置信息

src/app.vue：项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。

src/main.js： 项目的核心文件

三.路由

1.创建组件

2.引入组件 import ...

from ""//导入

3.注册组件

export default new Router({

routes: [{

path: '/',

name: 'HelloWorld',

component: HelloWorld,

children:[{

path:'world',

component:world

},{

path:'girl',

component:girl

}]

}]

})

5.export default//导出

6.new Vue{//new一个实例

el:'',//挂载点

router,//使用路由

components: { App },//使用的根组件

template: '<App/>'

}

7.定义路由的跳转链接

<router-link active-class="类名" tag="显示标签"

to="跳转位置"></router-link>

8.路由激活后组建显示的位置

<router-view></router-view>

组件优化（懒加载）

export default new Router({

mode:"history",//去除地址中的#

routes: [

{path:"/",redirect:"/home"},//重新定向

{path: '/home',component:resolve=>{require(['@/components/Home'],resolve)},

children:[

{path:"/home",redirect:"/fg"},//重新定向

{path:

'/world/:dd/:jk',component:resolve=>{require(['@/components/World'],resolve)}}

]

},

{path:'/index',component:resolve=>{require(['@/components/Index'],resolve)},

children:[

{path:

'/route1',component:resolve=>{require(['@/components/route1'],resolve)}}

]

}

]

})

四.axios

1.安装axios

npm install --save axios

2.在入口main.js中导入axios 并将axios写入vue的原型，这样就能更简单的使用。

import axios from 'axios'

import Qs from 'qs'

//QS是axios库中带的，不需要我们再npm安装一个

Vue.prototype.axios = axios;

Vue.prototype.qs = Qs;

Ps:Qs这个库是帮助我们解决上面的那个坑的,建议使用...

3.在项目里愉快的使用axios啦

this.axios.post('/api/test',this.qs.stringify({'name':'xiaoming','sex':'nan'}),{

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

})

.then(function(res){

console.log(res.data)

//控制台打印请求成功时返回的数据

//bind(this)可以不用

}.bind(this))

.catch(function(err){

if(err.response) {

console.log(err.response)

//控制台打印错误返回的内容

}

//bind(this)可以不用

}.bind(this)