vue serve命令,实现快速原型开发

327 阅读1分钟

一、首先查看全局安装包

npm list -g --depth 0
OR
yarn global list --depth=0

二、查看 vue-cli

我们看到官网上显示需要 vuecli 的版本号需要在4.x

a160a0e067c711eca2167d8e5aa2644d.png 三、检查 vuecli 版本号,发现是 2.x 四、卸载 vue-cli 的插件

npm uninstall -g vue-cli

五、安装新的 vue-cli

npm install -g @vue/cli

六、检查 vue 指令 4df2a33067c811eca2167d8e5aa2644d.png 七、运行 vue serve 717e858067c811eca2167d8e5aa2644d.png

我当前的目录结构:

我这里装了vue, element-ui, axios, express, lodash的依赖包 axios用于做请求使用 express用于做服务器使用

fb17bc606c6b11eca2167d8e5aa2644d.png e48f4da06c6b11eca2167d8e5aa2644d.png b7b57c8067c711eca2167d8e5aa2644d.png main.js 为写vue的入口 server.js为提供接口服务使用的

后续

引入element-ui的时候报错: 20d01c0067d411eca2167d8e5aa2644d.png

elementUI报错找不到依赖 core-js/library/fn/object/assign in ./node_modules/babel-runtime/core-js/object/ass

解决办法:

全局导入elementUI时总是报错说找不到和core-js相关的依赖,类似:core-js/library/fn/object/assign in ./node_modules/babel-runtime/core-js/object/assign.js,找了好多解决方案,最终有效解决的方案如下:

首先,升级core-js,执行命令

npm install core-js@3 --save 

然后再执行

npm install async-validator@1.11.5 --save

重启项目,报错消失

若是还没有效果,那就再执行

npm i -D babel-plugin-component

配置.babelrc文件,没有该文件的在该项目根目录创建一个

{
  "presets": [
    [
      "@babel/preset-env", 
      {
        "useBuiltIns": "usage",
        "corejs": 3 
      }
    ]
  ],
  "plugins": [
    [ "component",
      {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
      }
      ]
  ] 
}