Vue2.0项目搭建踩坑指南-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36196162/article/details/75729622

本文档详细介绍了在Node环境下使用Vue CLI搭建Vue2.0项目的步骤，包括安装npm、初始化webpack模板以及遇到的常见问题。特别提示，执行`vue init webpack`时需先安装npm，以免遗漏。在学习过程中，作者分享了自己因忽视此步骤而走的弯路，并提醒读者避免类似错误。同时，指出了某些在线资源可能存在的问题，如加载缓慢等。在编码规范方面，强调了在data中赋值必须有空格，以及不同版本Vue代码的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

node环境下vue2.0项目搭建

http://www.cnblogs.com/zhihou/p/6422704.html

参考此网址搭建完成！特此感谢。

注意的是，在vue init webpack 要安装npm npm install ，开始忽略了，安装上好了，希望大家不要向我绕弯路。

https://www.v2ex.com/t/324077学习下（这个网址有问题，总是链接个什么东西，弄的很卡，后来才发现。）

感觉掉坑里了，以前在页面上用的好好的。

vue cli这个脚手架还真。。。

方法要写成data () {}赋值前一定要有空格，这个错好多次，而且我用的版本好像高一些，和网上的代码还有些不同。

入口文件 main.js 和 App.vue，这连个文件名应该是固定。

项目下src目录结构

main.js代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import 'bootstrap/dist/css/bootstrap.css'
import store from './store'

Vue.config.productionTip = false

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

console.log("hello,I'm in main.js")

App.vue


    
    
    
      
      
      
       
       
        
        
          计划版 
        
        
         
          
            首页 
          
 
          
            计划列表 
          
      
       
       
    
      
      
    
      
      
      
       
       
        
        
        
      
       
       
      
       
       
        
        
        
      
       
       
    
      
      
  
     
     

    
    
<script>
import Sidebar from '@/components/Sidebar.vue'
export default {
  name: 'app',
  template: '
    
    ',
  components: { Sidebar }
}
</script>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Hello1 from '@/components/Hello1'
import Home from '@/components/Home'
import TimeEntries from '@/components/TimeEntries'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/aaa',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/bbb',
      name: 'Hello1',
      component: Hello1
    },
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/time-entries',
      name: 'TimeEntries',
      component: TimeEntries,
      children: [{
        path: 'log-time',
        name: 'LogTime',
        component: resolve => require(['@/components/LogTime.vue'], resolve)
      }]
    }
  ]
})

组件components/

Home.vue


     
     
    
       
       任务追踪
    
       
       
      
        
         
         
           创建一个任务 
         
      
    
  
      
      

     
     
export default {
  name: 'home'
}

TimeEntries.vue


      
      
    
        
        
         
         
      创建
    
        
        
    
        
        
      
         
         创建
    
        
        
    
        
        
    
        
        
    
        
        
      
         
         
        还没有任何计划
      
      
         
         
        
          
           
            
             
              
               {{plan.name}}   
             
             
               {{plan.totalTime}}  
               {{plan.date}}  
             
             
             {{plan.comment}} 
             
             
              
             
           
 
      
         
         
    
        
        
  
       
       

      
      
<script>
  export default {
    name: 'TimeEntries',
    computed: {
      plans () {
        return this.$store.state.list
      }
    },
    methods: {
      deletePlan (idx) {
        this.$store.dispatch('decTotalTime', this.plans[idx].totalTime)
        this.$store.dispatch('deletePlan', idx)
      }
    }
  }
</script>

LogTime.vue


       
       
    
         
         
        
          
          
          
           
           日期
          
           
           
        
          
          
        
          
          
          
           
           时间
          
           
           
        
          
          
    
         
         
    
         
         
      
          
          
          
           
           备注
          
           
           
      
          
          
    
         
         
    
         
         
    
         
         
          
          取消
         
         
    
         
         
  
        
        

       
       
<script>
import logo from './../assets/logo.png'
export default {
  name: 'LogTime',
  data () {
    return {
      date: null,
      totalTime: 0,
      comment: null
    }
  },
  methods: {
    save () {
      const plan = {
        name: '二嘎子',
        avatar: logo,
        totalTime: this.totalTime,
        date: this.date,
        comment: this.comment
      }
      console.log(plan)
      this.$store.dispatch('savePlan', plan)
      this.$store.dispatch('addTotalTime', this.totalTime)
      this.$router.go(-1)
    }
  }
}
</script>

Sidebar.vue


       
       
     
         
         
      
          
          已有时长
     
         
         
     
         
         
      
          
          {{timer}}小时
     
         
         
  
        
        

       
       
<script>
export default {
  name: 'sidebar',
  computed: {
    timer () {
      return this.$store.state.totalTime
    }
  }
}
</script>

store下vuex处理

index.js

/**
 * Created by richard on 2017/7/23.
 */
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex)

const state = {
  totalTime: 0,
  list: []
}

export default new Vuex.Store({
  state,
  mutations,
  actions
})

actions.js

/**
 * Created by richard on 2017/7/23.
 */
import * as types from './mutation-types'

export default {
  addTotalTime ({ commit }, time) {
    commit(types.ADD_TOTAL_TIME, time)
  },
  decTotalTime ({ commit }, time) {
    commit(types.DEC_TOTAL_TIME, time)
  },
  savePlan ({ commit }, plan) {
    commit(types.SAVE_PLAN, plan)
  },
  deletePlan ({ commit }, plan) {
    commit(types.DELETE_PLAN, plan)
  }
}

mutations.js

/**
 * Created by richard on 2017/7/23.
 */
import * as types from './mutation-types'

export default {
  [types.ADD_TOTAL_TIME] (state, time) {
    state.totalTime = parseInt(state.totalTime) + parseInt(time)
  },
  [types.DEC_TOTAL_TIME] (state, time) {
    state.totalTime = parseInt(state.totalTime) - parseInt(time)
  },
  [types.SAVE_PLAN] (state, plan) {
    state.list.push(
      Object.assign({}, plan)
    )
  },
  [types.DELETE_PLAN] (state, idx) {
    state.list.splice(idx, 1)
  }
}

mutation-types.js

/**
 * Created by richard on 2017/7/23.
 */
export const ADD_TOTAL_TIME = 'ADD_TOTAL_TIME'
export const DEC_TOTAL_TIME = 'DEC_TALAL_TIME'

export const SAVE_PLAN = 'SAVE_PLAN'
export const DELETE_PLAN = 'DELETE_PLAN'