從零開始經由過程vue-cli搭建項目

2023年10月29日 211次阅读 来源: Just_do
  1. npm i -g vue -cli 全局裝置vue-cli腳手架【按需裝置】
  2. vue init webpack my-project 構建項目
  3. cd my-project 翻開項目目次，到項目目次途徑
  4. npm install 能夠運用cnpm i 裝置依靠包
  5. npm run dev 將當地項目跑起來

    接下來就是做一些設置項

package.json

webpack-dev-server 加上--open --hot  【--hot】參數能夠熱更新，而且我們實行完run后直接在窗口翻開【--open】
"scripts": {
    "dev": "webpack-dev-server --inline --hot --open --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

根據你的需求最先你的項目。
踩坑記:
坑一：

 "vue": "^2.5.2",
 "vue-router": "^3.0.1"
 "webpack": "^3.6.0",

router/index.js

碰到報錯：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/login',
      component: require('@/pages/login').default,
      meta: {
        title: '登錄'
      },
    }, {
      path: '/404',
      component: require('@/pages/404').default,
      meta: {
        title: '404'
      }
    }, { path: '*', redirect: '/404', hidden: true }
  ]
})
 Failed to mount component: template or render function not defined.

解決方案 require途徑后加.default

    原文作者：Just_do
    原文地址: https://segmentfault.com/a/1190000015056936
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞