vue脚手架（vue-cli）如何搭建项目

一、安装

1、安装nodejs（自带npm）

2、安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、全局安装webpack
     npm install webpack –g
4、安装vue-cli脚手架构建工具

npm install vue-cli –g

二、使用vue-cli构建项目目录

1、准备一个文件夹作为你的工作空间（以后的每个项目都在文件夹下）

               如：e:\workspace

2、使用vue脚手架构建项目

      在工作空间的目录下运行    vue init webpack 项目名称，如：vue init webpack taobao

     

3、vue项目目录

对于每个文件夹的意思以及如何写代码后面会有解释。

4、 启动项目（服务）

         在命令行（转到项目目录下，如：e:\workspace\taobao）执行命令： npm run dev。看到如下画面，说明成功启动，默认端口号是8080

           

5、 运行（测试安装是否成功）
      在地址栏中输入http://localhost:706/#

看到右图,说明成功了，恭喜您，亲！

     

三、开发功能（如何使用vue脚手架进行开发_商品列表和商品详情）

 1、假设：

项目的页面包括三部分：top，bottom和内容

在components下增加top.vue,bottom.vue,goodslist.vue,goodsdetail.vue

在app.vue进行整体布局

在router/index.js做路由设置

     

2、代码：

   1）、components下的top

<template>
  <div class="topcss">
    {{msg}}
  </div>
</template>
<script>
export default {
  name: 'topname',
  data () {
    return {
      msg: '我是顶部'
    }
  }
}
</script>
<style scoped>
.topcss{	width:1000px;	height:200px;	background-color:pink;  }
</style>

2）、 components下的bottom

<template>
  <div class="bottomcss">
    {{msg}}
  </div>
</template>
<script>
export default {
  name: 'bottomname',
  data () {
    return {
      msg: '我是底部'
    }
  }
}
</script>
<style scoped>
.bottomcss{   width:1000px;	height:120px;	background-color:orange;}
</style>

3）、 components下的goodslist

<template>
  <div class="goodslistcss">
    <ul>
	<li v-for="item in goodslist">
	<p @click="goGoodsdetail(item.goodsid)">商品编号:{{item.goodsid}}</p>
	<p>商品名称:{{item.goodsname}}</p>
	<p>商品价格:{{item.goodsprice}}</p>
	</li>
	</ul>
  </div>
</template>

<script>
export default {
  name: 'goodslist',
  methods:{
  	goGoodsdetail:function(goodsid){this.$store.state.id=goodsid;}
  },
  data () {
    return {
      goodslist: [
	{"goodsid":"01001","goodsname":"铅笔","goodsprice":12},
	{"goodsid":"01002","goodsname":"钢笔","goodsprice":25}
     ]    }
  }
}
</script>
<style scoped>
.goodslistcss{width:1000px;height:400px;background-color:gray;}
</style>

4）、components下的goodsdetail

<template>
  <div>
  <p>商品编号：{{goodsdetail.goodsid}}</p>
  <p>商品名称：{{goodsdetail.goodsname}}</p>
  </div>
</template>
<style scoped>
  p{
       color:red;
       background-color:green
  }
</style>

<script>
var goodslist=[
    {"goodsid":"01001","goodsname":"铅笔","goodsprice":12},
    {"goodsid":"01002","goodsname":"钢笔","goodsprice":25}
];
function searchgoodsdetail(goodsid){
     for(let i=0;i<goodslist.length;i++){
        if(goodslist[i].goodsid==goodsid){ return goodslist[i]; }
     }    return null
}
export default {
  name: 'HelloWorld',
  computed: {
    goodsdetail: function () {
      let goodsid = this.$store.state.id;  return searchgoodsdetail(goodsid);      
    }
  }
}
</script>

5）、app.vue

<template>
  <div id="app">
  <top></top>
    <hr/>
    <router-view/>
    <hr/>
    <bottom></bottom>
  </div>
</template>

<script>
import top from './components/top';
import bottom from './components/bottom';

export default {
  name: 'App',
  components:{
    top,bottom
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

6）、router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import goodslist from '@/components/goodslist'
import goodsdetail from '@/components/goodsdetail'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'goodslist',
      component: goodslist
    },
    {
      path: '/goodsdetail/:goodsid',
      name: 'goodsdetail',
      component: goodsdetail
    }
  ]
})

7）、 main.js

import Vue from 'vue'
import Vuex from 'vuex'
import store from './store/store'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

8）、使用vuex进行兄弟组件之间的传值：

     在此示例中goodslist组件需要给goodsdetail组件中传入goodsid。 在src中创建store文件夹，在store文件夹下创建store.js，如下代码：

import Vue  from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
    state:{
             id: ' '
      },
      mulations:{
           setId(state ,  id) {
                   state.id = id
             }
        }
})

9）、使用vuex进行兄弟组件之间的传值：
在main.js中增加
import Vuex from 'vuex'
import store from './store/store'
vue实例中增加store属性
在goodslist.vue中增加
methods:{
goGoodsdetail:function(goodsid){
    this.$store.state.id=goodsid; //把goodsid保存到id中
    this.$router.push({ path: '/goodsdetail',name:"goodsdetail",params: { goodsid:goodsid}});
}
},
在goodsdetail.vue中增加
computed: {
    goodsdetail: function () {
      return searchgoodsdetail(this.$store.state.id);      //获取id
    }

  }

10）、运行npm run dev。在浏览器中输入：http://localhost:706