vue-cli 3.0 使用

栏目: JavaScript · 发布时间: 4年前

内容简介:如果想要使用vue cli 3.0 首先需要全局安装,前提要求Node.js版本必须是8.0及以上vue cli 3.0默认会覆盖vue cli 2.0 ,如果想要在使用3.0版本的时候同时使用2.0版本,那么执行以下命令该命令是安装一个桥接工具,2.0版本的命令依然会被保留

安装

如果想要使用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

vue-cli 3.0 使用

配置

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

vue-cli 3.0 使用

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

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

vue-cli 3.0 使用

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

vue-cli 3.0 使用

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

vue-cli 3.0 使用

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

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

"eslintConfig": {
    ...
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier" //删除掉这里
    ],
    ...
  },

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

vue-cli 3.0 使用

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

vue-cli 3.0 使用

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

vue-cli 3.0 使用

如果后期我们想要删除之前配置的模板,可以找到用户下的 .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:"./"
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

网飞传奇

网飞传奇

[美]吉娜·基廷 / 谭永乐 / 中信出版社 / 2014-1-1 / 42

飞的历史充满了传奇色彩,它的崛起伴随着复杂斗争、幸运转折、个人背叛……它自身的历史比它出租的那些电影还要更富有戏剧性。网飞在1997年建立,而建立的原因仅仅是因为创始人伦道夫和哈斯廷斯没有按时归还租借的DVD,还要缴纳因此而产生的滞纳金。 1999年,网飞公司摒弃了百视达的“每片付租”模式,转而采用了一种订阅模式:用户只需要支付固定费用,就能尽情租片观赏,免去了到期还片日、滞纳金、运费和手续......一起来看看 《网飞传奇》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器