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)
