资讯专栏INFORMATION COLUMN

vue-cli3.x 新特性及踩坑记

xiaoqibTn / 1993人阅读

摘要:前言都到了,所以是时候玩转一下的新特性了。安装的包名称由改成了。方法一原因的配置改变了,导致正确的不能用。打开终端,切换到根路径文件里面修改为方法二是默认路径修改了路径会出现错误。按上面的方法修改完,再全局卸载果然就成功了。

前言

vue-cli 都到 3.0.3 了,所以是时候玩转一下 vue-cli 3 的新特性了。

1. vue-cli 3.0.3
以下的安装都是在 macOS 的环境下进行的,当然在 windows 和 linus 下也同理。
1.1 安装
vue cli 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

可以使用下列任一命令安装这个新 vue-cli 3.0.3 的包:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

你还可以用这个命令来检查其版本是否正确 (3.x):

vue --version

或者:

vue -V
1.2使用图形化界面

你也可以通过 vue ui 命令以图形化界面创建和管理项目:

vue ui

上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。

1.3 创建项目
1.3.1 默认型

新建文件夹,在该文件夹下打开命令窗口,输入以下命令进行新建项目,当然我起的项目名字叫 vue-webpack-demo

vue create vue-webpack-demo

会让你选择默认(default)还是手动(Manually),(注:现在vue-cli3.0默认使用yarn下载)。

先是默认的,一路回车后的项目目录如下:

再来手动的,我起的项目名字叫 vue-webpack-demo2,如下图,让你选择那些选项,按 空格键 是选择单个,a 键 是全选。

我选择了常用的如下选项:

vue-router 默认 hash 模式,所以我选择默认的,选择了 n ,而不是 history 模式:

下一步之后问询问你安装哪一种 CSS 预处理语言,我是选择了用的 less。

这个是问你选择哪个自动化代码格式化检测,配合 vscode 编辑器的,Prettier - Code formatter插件,我选的随后一个。

第一个是保存就检测,第二个是 fix 和 commit 的时候检查。

选择单元测试解决方案,Mocha是流行的JavaScript测试框架之一,通过它添加和运行测试,从而保证代码质量,chai 是断言库,我两个都选择了。

上边这俩意思问你像,babel, postcss, eslint 这些配置文件放哪?第一个是:放独立文件放置,第二个是:放package.json里,这里小汪选择放多带带配置文件,选第一个

下面倒数第二行问你是否将以上这些将此保存为未来项目的预配置吗 ?选择是的时候,下次创建项目时,可以选择刚刚配置好的配置,不用再每个都配置一遍。最后一个是选择的名字,你随意选择,点击确定就开始下载模板了。

再创建项目的时候,刚刚配置好的选择的名字 vue-webpack4 会这样子出现:

启动命令

// 1. 进入项目
cd vue-webpack-demo 
// 或者 cd vue-webpack-demo2
// 2. 安装依赖
npm i
// 3. 启动
npm run serve

1.4 项目改变

相比 vue-cli 2.X 创建的目录,vue-cli 3.0 创建的目录看不见 webpack 的配置

启动命令行由:

npm run dev 或者 npm start

改变为:

npm run serve

安装过程也发生了一些变化,配置可以保存,下次可以再用,像前面的 vue-webpack4。

手动配置 webpack:在根目录下新建一个 vue.config.js 文件,进行你的配置 :

const path = require("path");

module.exports = {
    // 基本路径
    baseUrl: "./",
    // 输出文件目录
    outputDir: "dist",
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // webpack配置
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: () => {},
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === "production") {
            // 为生产环境修改配置...
            config.mode = "production";
        } else {
            // 为开发环境修改配置...
            config.mode = "development";
        }

        Object.assign(config, {
            // 开发生产共同配置
            resolve: {
                alias: {
                    "@": path.resolve(__dirname, "./src"),
                    "@c": path.resolve(__dirname, "./src/components")
                }
            }
        });
    },
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: true,
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {},
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
    },
    // use thread-loader for babel & TS in production build
    // enabled by default if the machine has more than 1 cores
    parallel: require("os").cpus().length > 1,
    // PWA 插件相关配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    // webpack-dev-server 相关配置
    devServer: {
        open: process.platform === "darwin",
        host: "0.0.0.0",
        port: 8080,
        https: false,
        hotOnly: false,
        // proxy: {
        //     // 设置代理
        //     // proxy all requests starting with /api to jsonplaceholder
        //     "http://localhost:8080/": {
        //         target: "http://baidu.com:8080", //真实请求的目标地址
        //         changeOrigin: true,
        //         pathRewrite: {
        //             "^http://localhost:8080/": ""
        //         }
        //     }
        // },
        before: (app) => {}
    },
    // 第三方插件配置
    pluginOptions: {
        // ...
    }
};

当然如果你不想用3.0的话,还是可以继续使用2.0的, 官方文档是这样说的:

具体配置看官方文档:
vue-cli 3.0
简单的配置方式

踩坑记 1. npm 的全局路径被修改了

我都不记得在装什么包的时候修改了 mac 中 npm 的全局路径了,平时 npm 运行各种命令不报错。

全局卸载 vue-cli 命令行:

npm uninstall vue-cli -g;

但是今天全局卸载 vue-cli 的时候一直不成功,搞了一个小时,结果看了一下 npm 的全局路径,才发现路径不对!!!

如果你的 npm 的全局路径也变了,请按如下步骤修改加默认的。

方法一:

原因:npmr 的配置改变了,导致正确的 npmr 不能用。

打开终端,切换到根路径

cd 
open .npmrc 

文件里面修改为 prefix=/usr/local

方法二:

npm config set prefix /usr/local  //是默认路径 修改了路径会出现错误。

按上面的方法修改完,再全局卸载 vue-cli 果然就成功了。

最后

你以为本文就这么结束了 ? 精彩在后面 !!!

全栈修炼 有兴趣的朋友可以扫下方二维码关注我的公众号

我会不定期更新有价值的内容,长期运营。

关注公众号并回复 福利 可领取免费学习资料,福利详情请猛戳: Python、Java、Linux、Go、node、vue、react、javaScript

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

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

相关文章

  • 前端解决第三方图片防盗链的办法 - html referrer 访问图片资源403问题

    摘要:具体问题,就是中通过标签引入一个第三方的图片地址,报。解决方案如原网址显示此图片来自微信公众平台,未经允许不得应用方法在标签里加这样存在第三方网站上的图片,在你的网站上就可以访问了。 showImg(https://segmentfault.com/img/bVbtK8u?w=436&h=284); 问题 笔者网站的图片都是上传到第三方网站上的,比如 简书、掘金、七牛云上的,但是最近简...

    xuxueli 评论0 收藏0
  • Vue + TypeScript + Element 项目实践(简洁时尚博客网站)及踩坑记

    摘要:前言本文讲解如何在项目中使用来搭建并开发项目,并在此过程中踩过的坑。具有类型系统,且是的超集,在年势头迅猛,可谓遍地开花。年将会更加普及,能够熟练掌握,并使用开发过项目,将更加成为前端开发者的优势。 showImg(https://segmentfault.com/img/remote/1460000018720573); 前言 本文讲解如何在 Vue 项目中使用 TypeScript...

    luckyyulin 评论0 收藏0
  • 实现一个前端路由,如何实现浏览器的前进与后退 ?

    摘要:执行过程如下实现浏览器的前进后退第二个方法就是用两个栈实现浏览器的前进后退功能。我们使用两个栈,和,我们把首次浏览的页面依次压入栈,当点击后退按钮时,再依次从栈中出栈,并将出栈的数据依次放入栈。 showImg(https://segmentfault.com/img/bVbtK6U?w=1280&h=910); 如果要你实现一个前端路由,应该如何实现浏览器的前进与后退 ? 2. 问题...

    刘东 评论0 收藏0
  • vue-cli +webpack+vue-router 踩坑记

    摘要:其中定义了一些命令,还记得我们初始化项目完成后执行其实就是执行简单的来说是运行时依赖生产环境,是开发时的依赖开发环境相应的在安装包时,有两种命令参数可以把它们的信息写入文件,会把依赖包名称添加到文件键下,则添加到文件键下。 这次主要是记录下自己在做vue-cli +webpack +vue-router 的经历 以及一些踩过的坑,算是做一个简单的总结 一.vue的基本介绍 1)渐进式的...

    OpenDigg 评论0 收藏0
  • Dubbo 2.7.1 踩坑记

    摘要:面试题服务提供者能实现失效踢出是什么原理高频题服务宕机的时候,该节点由于是持久节点会永远存在,而且当服务再次重启的时候会将重新注册一个新节点。 Dubbo 2.7 版本增加新特性,新系统开始使用 Dubbo 2.7.1 尝鲜新功能。使用过程中不慎踩到这个版本的 Bug。 系统架构 Spring Boot 2.14-Release + Dubbo 2.7.1 现象 Dubbo 服务者启动...

    wudengzan 评论0 收藏0

发表评论

0条评论

xiaoqibTn

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<