新手创建vue项目

一、创建vue项目

1、安装node.js

2、安装npm

: npm install -g npm

3、全局安装vue的脚手架工具

：npm install -g vue-cli

4、全局安装webpack

：npm install -g webpack

5、进入所要创建的目录，创建项目

vue init webpack my-project

6、运行项目

npm run dev

访问 : localhost:8080

二、引进项目需要的依赖包，常用的有

1、书写样式的sass依赖（sass-loader安装的依赖于node-sass,并且安装了css-loader和style-loader）

npm install --save-dev style-loader

npm install --save-dev css-loader

npm install --save-dev sass-loader

npm install --save-dev node-sass

npm install --save-dev sass-loader

npm install --save-dev stylus

npm install --save-dev stylus-loader

npm install --save-dev express

2、快速完成应用界面的ui框架（移动端常用mint-ui，pc端常用element-ui）

npm install element-ui -S

npm install mint-ui -S

3、请求接口需要的异步请求（axios）

npm install axios

4、页面路由（router）

npm install vue-router

三、如何书写页面和css

1、<style lang="stylus" rel="stylesheet/stylus" scoped="scoped"> 使用scoped会相互影响，比如父组件的样式在打包后会影响到子组件的样式

解决方法：

将scoped模式更改为module

采用样式时候的写法

<div :class="$style.tab-bar" ></div>

2、采用继承式stylus

四、如何配置路由

1、引进路由模块、创建路由对象，在组件页面渲染路由：<router-view></router-view>。

export default new Router({

mode: 'history',

routes: [

]

})

2、路由跳转方式

1）<router-link slot="right":to="{name:'HelloWorld'}" >

<p>路由跳转</p>

</router-link >

2） <p @click="$router.push('home')"> 路由跳转2</p>

3、嵌套路由

export default new Router({

mode: 'history',

routes: [

{

path: '*',

redirect:{ name: 'home' }

},

{

path: '/home',

name: 'home',

component: home,

children:[

{

path: 'HelloWorld',

name: 'home.HelloWorld',

component: HelloWorld

},

{

path: 'tabs',

name: 'home.tabs',

component: tabs

}

]

}

]

})

4、操作 History

// 在浏览器记录中前进一步，等同于 history.forward() router.go(1) // 后退一步记录，等同于 history.back() router.go(-1) // 前进 3 步记录 router.go(3) // 如果 history 记录不够用，那就默默地失败呗 router.go(-100) router.go(100)

5、路由传值

this.$router.push({

name:'addAddress',

query:{id:addressId}

})

 

6、组件页面接参数

this.$route.query.id

注意：相同组件复用的时候，通过路由传不同的参数走不一样的业务逻辑

 

五、组件之间相互传值

1、组件之间相互引用：

在js中引入组件然后注册组件

import swiper from './swiper.vue';

components:{

"v-swiper" :swiper

}

2、父组件传值给子组件（方法可以传，this整个父组件可以传，属性可以传）

在引用子组件上绑定动态属性

<v-swiper :title="title"></v-swiper>

在子组件上通过props接收数据

props:['title']

然后正常使用

{{title}}

3、父组件主动获取子组件的数据

1)调用子组件的时候定义一个ref

<v-swiper ref="swiper"></v-swiper>

2）在父组件里面通过

this,$refs.swiper.属性

this,$refs.swiper.方法

4、子组件主动获取父组件的数据

this,$parent.属性

this,$parent.方法

 

5、非父子组件之间的相互传值

1）新建一个js文件，然后引入vue，实例化vue，最后暴露这个实例

2）在要广播的地方引入刚才定义的实例

3）通过vueEmit.$emit('名称'，‘数据’)

4）在接收数据的地方通过

vueEmit.$on('名称'，function()){

})

五、export default 和 export 区别

1、export与export default均可用于导出常量、函数、文件、模块等

2、在一个文件或模块中，export、import可以有多个，export default仅有一个

3、通过export方式导出，在导入时要加{ }，export default则不需要

六、vue的周期生命钩子函数

var vm = new Vue({/*创建vue对象*/

el: '#app',/****挂载目标****/

data: {/****数据对象****/

message: 'Hello World!' },

computed:{/****实现某一属性的实时计算****/

message1:function(){

return this.message.split("").reverse().join("");

}

},

watched:{/****检测某一属性值的变化****/

},

methods:{/****组件内部的方法****/

},

beforeCreate: function() {

console.group('------beforeCreate创建前状态------');

console.log("%c%s", "color:red", "el : " + this.$el); //undefined

console.log("%c%s", "color:red", "data : " + this.$data); //undefined

console.log("%c%s", "color:red", "message: " + this.message)//undefined },

/** * 1.在beforeCreate和created钩子之间，程序开始监控Data对象数据的变化及vue内部的初始化事件

* * */

created: function() {

console.group('------created创建完毕状态------');

console.log("%c%s", "color:red", "el : " + this.$el); //undefined

console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化

console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 },

/** * 2.在created和beforeMount之间，判断是否有el选项，若有则继续编译，无，则暂停生命周期； * 然后程序会判断是否有templete参数选项，若有，则将其作为模板编译成render函数。若无，则将外部html作为模板编译（template优先级比外部html高） * * */

beforeMount: function() {

console.group('------beforeMount挂载前状态------');

console.log("%c%s", "color:red", "el : " + (this.$el)); //已被初始化

console.log(this.$el);

console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化

console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 },

/** * 3.在beforeMount和mounted之间，程序将上一步编辑好的html内容替换el属性指向的dom对象或者选择权对应的html标签里面的内容 * * */

mounted: function() {

console.group('------mounted 挂载结束状态------');

console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化

console.log(this.$el);

console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化

console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 },

/** * 4.mounted和beforeUpdate之间，程序实时监控数据变化 * * */

beforeUpdate: function() {

console.group('beforeUpdate 更新前状态===============》');

console.log("%c%s", "color:red", "el : " + this.$el); console.log(this.$el);

console.log("%c%s", "color:red", "data : " + this.$data);

console.log("%c%s", "color:red", "message: " + this.message); },

/** * 5.beforeUpdate和updated之间，实时更新dom * * */

updated: function() {

console.group('updated 更新完成状态===============》');

console.log("%c%s", "color:red", "el : " + this.$el);

console.log(this.$el); console.log("%c%s", "color:red", "data : " + this.$data);

console.log("%c%s", "color:red", "message: " + this.message); },

beforeDestroy: function() { console.group('beforeDestroy 销毁前状态===============》');

console.log("%c%s", "color:red", "el : " + this.$el); console.log(this.$el);

console.log("%c%s", "color:red", "data : " + this.$data);

console.log("%c%s", "color:red", "message: " + this.message); },

/** * 6.实例销毁 * * */ destroyed: function() { console.group('destroyed 销毁完成状态===============》'); console.log("%c%s", "color:red", "el : " + this.$el); console.log(this.$el);

console.log("%c%s", "color:red", "data : " + this.$data); console.log("%c%s", "color:red", "message: " + this.message) } })

七、如何向服务器请求

安装axios依赖

get请求

this.$axios.get(url).then((res)=>{

console.log(res.data);

}).catch(function(err){

console.log(err);

})

post请求

this.$axios.post(url,{

orderid:orderid

}).then((data)=>{

console.log(data.data);

}).catch(function(err){

console.log(err);

})