从零开始通过vue-cli搭建项目

2024年1月12日 193次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞