vue项目要点

• 安装 node npm webpack环境
  node npm
  webpack（本地和全局）
• 建立 vue -cli 脚手架

//要先安装好node，npm，webpack在建立 vue -cli 脚手架
先新建一个空文件夹，名字不要有中文，在文件夹打开命令窗口执行下面命令
# 全局安装 vue-cli
$ npm install --global vue-cli 

# 创建一个基于 webpack 模板的新项目（只有路由Y，下面3个都N）
$ vue init webpack my-project 

# 安装依赖，走你
$ cd my-project

# npm根据package.json下载需要文件
$ npm install

# 运行npm中script的dev
//开发模式
$ npm run dev
//生产模式
$ npm run build

• 路由配置（router/index.js）

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import newslist from '@/components/news/newslist'
import newsshow from '@/components/news/newsshow'
import imagelist from '@/components/photo/imagelist.vue'
import imgshow from '@/components/photo/imgshow.vue'
import goodslist from '@/components/goods/goodslist.vue'
import goodsshow from '@/components/goods/goodsshow.vue'
import goodsdesc from '@/components/goods/goodsdesc.vue'
import goodscomment from '@/components/goods/goodscomment.vue'
import shopcar from '@/components/shopcar/shopcar.vue'
Vue.use(Router)
export default new Router({
    linkActiveClass:'mui-active', //将激活的路由添加一个mui-active类名称
routes:[
        //redirect表示默认由Home占据
        {path:'/',redirect:'/Home'},
        {path:'/Home',component:home},
        {path:'/news/newslist',component:newslist},
        //带参数跳转
        {path:'/news/newsshow/:newsid',component:newsshow},
        {path:'/photo/imagelist',component:imagelist},
        {path:'/photo/imageshow/:imgid',component:imgshow},
        {path:'/goods/goodslist',component:goodslist},
        {path:'/goods/goodsshow/:goodsid',component:goodsshow},
        // button跳转
        {name:'goodsdesc',path:'/goods/goodsdesc/:goodsid',component:goodsdesc},
        {name:'goodscomment',path:'/goods/goodscomment/:goodsid',component:goodscomment},
        {path:'/shopcar',component:shopcar} 
  ]
})

• 路由跳转

1.Home的9宫格

        

                

                    

                    
                                                           
                            
                            
新闻资讯
                    

                    
                            
                            
图片分享
                    

                     
                            
                            
商品购买
                    

                            
                            
留言反馈
                    

                            
                            
视频专区
                    

                            
                            
联系我们
                    
                
 
        
2. Home ---newslist---newsshow---子组件
              //home页面Home ---newslist
                    
                                                           
                            
                            
新闻资讯
                    
            //newlist页面newslist---newsshow（）
                

                
                ![](item.img_url)
                    

                        {{item.title}}
                        

                            发表时间：{{item.add_time | datefmt}}
                            点击:{{item.click}}
                        
                    
                
            
          //newshow页面引入子组件（3步曲）
        
        
        import comment from '../subcom/comment.vue';
        components:{
                 comment // comment:comment
        }
3.button形式的按键路由跳转
     goodsshow页面的button跳转，这里是
    
        图文介绍       
        商品评论
methods:{
            // 导航到评论组件
            tocomment(){
                this.$router.push({name:'goodscomment',params:{goodsid:this.goodsid}});
            },
            // 导航到图文介绍组件
            todesc(){
                // 如何利用js代码进行路由跳转
                this.$router.push({ name: 'goodsdesc', params: { goodsid: this.goodsid }});
            },
               }

• 参数传递

1.路由带参数
 router/index.js:   {path:'/goods/goodsshow/:goodsid',component:goodsshow},
 newslist页面: .....
newsshow页面  //获取参数
data(){
            return {
                isshow:false, //小球默认是隐藏的
                goodsid:0,
                count:1, //接收inputNumber.vue组件传入的值
                swipeList:[],
                info:{}
            }
        },
created(){
            this.goodsid = this.$route.params.goodsid;          
            // 调用数据获取工作
            this.getswipelist();
            this.getinfo();
        },  
2.父给子传数值
[newshow 和 comment子组件之间的参数传递](http://www.jianshu.com/p/ad18852f6d1d)
3.子给父传数值
[goodsshow和inputNumber子组件之间的参数传递](http://www.jianshu.com/p/76f3acd3aaaa)
4.父给子加字给父
5.跨组件传值
[跨组件传值](http://www.jianshu.com/p/eb46d7ede316)