vue-cli 3.0 使用

PumpkinDylan 发布于2019-08-23 15:14 / 2523人阅读

摘要：安装如果想要使用首先需要全局安装，前提要求版本必须是及以上默认会覆盖，如果想要在使用版本的时候同时使用版本，那么执行以下命令该命令是安装一个桥接工具，版本的命令依然会被保留创建也可以通过命令打开一个图形化界面进行配置配置在版本中会

安装

如果想要使用vue cli 3.0 首先需要全局安装，前提要求Node.js版本必须是8.0及以上

</>复制代码 
npm install -g @vue/cli

vue cli 3.0默认会覆盖vue cli 2.0 ，如果想要在使用3.0版本的时候同时使用2.0版本，那么执行以下命令

</>复制代码 
npm install -g @vue/cli-init

该命令是安装一个桥接工具，2.0版本的命令依然会被保留

</>复制代码 
vue init webpack test-2

创建

</>复制代码 
vue create hello-cli3

也可以通过命令打开一个图形化界面进行配置

</>复制代码 
vue ui

配置

在3.0版本中会让我们自行选择需要的配置

第一个选项default是生成一个默认的简易配置的模板，可以类比为之前 2.0 版本中的webpack-simple模板，如果正式开发的话，建议选择Manually select features自己进行配置

在选择Manually select features后，会让我们选择模板中进行哪些配置，新添加了添加对TS和PWA的支持，这里可以根据项目情况自己选择需要使用那些，空格选中/取消，A键全选

接下来会让我们选择要使用的预编译工具，选择一个自己常用的

然后会让我们选择代码格式化检测工具

这里提供两个选项，保存的时候检测还是在commit和fix的时候检测，可以根据项目需要进行选择

这里如果不选择前面的 Linter/ Formatter就不会出现该选项，也可以在package中删除掉相关代码

</>复制代码 
"eslintConfig": {
    ...
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier" //删除掉这里
    ],
    ...
  },

然后会询问我们要将babel 等这些文件放置到一个独立文件 / package.json，推荐放置到一个独立文件

然后会让我们选择是否保存刚才的配置，第一项表示保存，保存之后下次再创建时就有我们之前的配置了，不需要再配置一遍，然后可以为该配置添加一个描述

在我们配置了这两项之后，再次使用vue create xxx 会出现我们之前的配置让我们可以直接复用之前的配置

如果后期我们想要删除之前配置的模板，可以找到用户下的.vuerc的json文件，找到presets项，删除掉对应模板名称及配置即可，也可以修改对应配置来更改模板

启动

在VUE CLI 3 中默认的下载使用yarn，所以命令使用yarn

</>复制代码 
yarn serve

打包

</>复制代码 
yarn build

官方文档地址

配置vue.config.js

在vue cli 3.0中取消了config配置文件，如果我们想要额外配置，需要在根目录新建一个vue.config.js文件，在该文件中进行配置

配置别名

</>复制代码 
const path=require("path");
function resolve(dir){
    return path.join(__dirname,dir)
}
module.exports={
    chainWebpack:config=>{
        config.resolve.alias
        .set("views",resolve("src/views"))
    }
}

配置代理

依然是采用http-proxy-middleware 做的跨域处理

</>复制代码 
module.export={
    devServer:{
        host:"localhost",
        port:8080,
        proxy: {
            "/api": {
                target: "https://api.douban.com/",
                changeOrigin: true,
                pathRewrite: {
                    "^/api": ""
                }
            }
        },
    }
}

处理首页白屏

在 3.0 中依然存在打包后首页白屏的问题，解决方案就是配置baseUrl

</>复制代码 
module.exports = {
    baseUrl:"./"
}

更加详细的关于vue.config.js文件的配置，可以参考这篇文章

GPU云服务器云服务器 vue-cli vue-cli3 gradle-3.0 jsf 3.0

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101736.html

vue-cli2.0转3.0之项目搭建

摘要：因为项目技术架构需要，要用进行搭建，所以简单的分享下如何优雅的开始。第三步创建项目相对，创建就不是之前一大堆了。直接，是项目名字。但是个人建议，进行多选，根据自己需要进行选择。根据提示，运行一把一下，跑起来的感觉很棒。因为项目技术架构需要，要用vue-cli 3.0进行搭建，所以简单的分享下3.0如何优雅的开始。下面做一下简单的介绍，希望可以帮到有需要的朋友。 vue-cli 3.0...

Zhuxy 2019-08-23 13:59 评论0 收藏0
记vue-cli@3.0和之前版本的差异

摘要：记使用方式和之前版本的差异的使用下载和安装项目生成的目录结构以上，目前版本的使用下载和安装项目生成的目录结构新的目录结构，隐藏了配置文件，封装了细节对比个区别区别下载包的包命变化。貌似是之前的版本有点问题记vue-cli@3.0使用方式和之前版本的差异 @2.9.3的使用 1.下载vue-cli和安装项目 cnpm i -g vue-cli#2.9.3 vue init webpa...

wow_worktile 2019-08-22 18:15 评论0 收藏0
使用VUE搭建后台管理系统(vue-cli更新至3.0)

摘要：最近还没来得及更新文章，就发现已经更新到版本了。安装成功启动的指令和相比有了些修改不过我们现在可以通过图形化界面进行启动启动之后照例访问即可访问新建的项目最近还没来得及更新文章，就发现vue-cli已经更新到3.0版本了。 //想了想还是用升级吧，反正最终都逃不掉，不如在这个项目上实验一下3.0的威力(并不会)。升级vue-cli npm install -g vue@cli v...

KitorinZero 2019-08-22 18:42 评论0 收藏0
vue-cli 3.0

摘要：配置环境变量参考打包后项目的启动发生了变化，之前可以直接打开，现在需要参数的意思是将其架设在模式下这个模式会处理即将提到的路由问题 (第一章)学习vue-cli 3.0脚手架构建vue项目 vue学习巩固及遇到的问题首先这次使用的vue脚手架为vue-cli 3.0，它跟之前的脚手架改变了很多，这里我也没去细细的研究，也只懂得了最基本的用法，参考: vue-cli 3 地址：http...

April 2019-08-23 11:36 评论0 收藏0
vue-cli 3.0

摘要：配置环境变量参考打包后项目的启动发生了变化，之前可以直接打开，现在需要参数的意思是将其架设在模式下这个模式会处理即将提到的路由问题 (第一章)学习vue-cli 3.0脚手架构建vue项目 vue学习巩固及遇到的问题首先这次使用的vue脚手架为vue-cli 3.0，它跟之前的脚手架改变了很多，这里我也没去细细的研究，也只懂得了最基本的用法，参考: vue-cli 3 地址：http...

mengera88 2019-06-26 17:48 评论0 收藏0