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
 ![20180308220743418][]

3、vue项目目录

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

4、启动项目（服务）

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

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

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

 ![20180308221142641][]

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

1、假设：

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

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

在app.vue进行整体布局

在router/index.js做路由设置

 ![2018030822134773][]

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
}