博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue-cli 3.0 使用
阅读量:6695 次
发布时间:2019-06-25

本文共 1827 字,大约阅读时间需要 6 分钟。

安装

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

clipboard.png

配置

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

clipboard.png

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

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

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

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

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

配置代理

依然是采用 做的跨域处理

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文件的配置,可以参考

转载地址:http://dqvoo.baihongyu.com/

你可能感兴趣的文章
在dos控制台显示utf8字符
查看>>
Git学习笔记:pull request
查看>>
MySQL学习(四)
查看>>
js中arguments对象和this对象
查看>>
html5--1.14 特殊符号的使用
查看>>
.net 实现微信公众平台的主动推送信息
查看>>
组内评分
查看>>
centos7 修改静态ip 和dns
查看>>
android全磁盘加密
查看>>
慎用子查询,因为难以优化
查看>>
C语言的世界
查看>>
HDU 6041 - I Curse Myself | 2017 Multi-University Training Contest 1
查看>>
快给你的网站添加微信公众号吧!
查看>>
php+mysql 除了设置主键防止表单提交内容重复外的另一种方法
查看>>
I2S简单学习
查看>>
C# 中的拓展方法,以StringBuilder加上IndexOf方法举例
查看>>
Sass
查看>>
css怎么设置2个div同行,第一个固定宽度,第二个占满剩余的部分
查看>>
行内元素之间间距的产生与去除
查看>>
JS继承
查看>>