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

Love The Way You Lie 2022-05-30 09:11 229阅读 0赞

一、安装

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项目目录

![70][]

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

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>

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

[20180308220743418]: /images/20220530/7c1044da8e13497f82b7f7201986adc1.png
[70]: /images/20220530/4b6d6f86764b4a93ad29298b1e070581.png
[20180308221032602]: /images/20220530/438e78ddd7954306b2ba522accbe3421.png
[20180308221142641]: /images/20220530/7eda73a81b4c4c2b84d5458c5e97ad0a.png
[2018030822134773]: /images/20220530/b4016a9ebff64a6c8bebd343f71652da.png