vue-cli 3.0

April 发布于2019-08-23 11:36 / 2514人阅读

摘要：配置环境变量参考打包后项目的启动发生了变化，之前可以直接打开，现在需要参数的意思是将其架设在模式下这个模式会处理即将提到的路由问题

(第一章)学习vue-cli 3.0脚手架构建vue项目 vue学习巩固及遇到的问题

首先这次使用的vue脚手架为vue-cli 3.0，它跟之前的脚手架改变了很多，这里我也没去细细的研究，也只懂得了最基本的用法，参考:

vue-cli 3 地址：https://cli.vuejs.org/zh/guide/

其中值得注意几点：

1.vue-cli 3 脚手架需要node.js 版本8.9 或更高版本,因为之前项目用的vue1.0，所以node版本用的比较低

    (6.11.3)，所以想同时管理多个node版本，所以用到了gnvm一个工具，
    官网也有推荐nvm 或 nvm-windows(本人没用).

2.记录下gnvm一些简单常用的命令链接描述：

        config       配置 .gnvmrc
        use          使用某个本地已存在的 Node.js 版本
        ls           输出 [local] [remote] Node.js 版本
        install      下载/安装任意已知版本的 Node.js
        uninstall    删除任意本地已存在的 Node.js
        update       下载 Node.js latest 版本并更新到 .gnvmrc 里面
        npm          NPM 下载/安装/删除 管理
        session      临时设定本地某个已存在的 Node.js 为 全局 Node.js
        search       查询并且输出符合查询条件的 Node.js 版本详细信息的列表
        node-version 输出 [global] [latest] Node.js 版本
        reg          设定 .gnvmrc 属性值 [noderoot] 为 环境变量 [NODE_HOME]，并加入到 Path 中
        version      查看 gnvm 版本
        安装多个node.js: gnvm install latest 1.0.0-x86 1.0.0-x64 5.0.0
        卸载本地任意 Node.js 版本: gnvm uninstall latest 1.0.0-x86 1.0.0-x64 5.0.0
        安装node.js 对应的npm版本：  1、gnvm有命令(可以去看文档)  2、npm install -g npm@5.0.1

3.vue-cli 3 灵活配置都作为插件项目构建好后也可以随时加插件，插件文档链接描述。

4.想修改启动时打开浏览器和修改端口等只需在package.json scripts对象中修改：

        具体的命令：
            用法：vue-cli-service serve [options] [entry]
            --open    在服务器启动时打开浏览器
            --copy    在服务器启动时将 URL 复制到剪切版
            --mode    指定环境模式 (默认值：development)
            --host    指定 host (默认值：0.0.0.0)
            --port    指定 port (默认值：8080)
            --https   使用 https (默认值：false)

5.动态图片或者说静态资源放在public文件夹下。不会经过webpack打包。
6.配置环境变量参考：https://segmentfault.com/a/11...
7.打包后dist项目的启动发生了变化，之前可以直接打开index.html，现在需要

npm install -g serve
# -s 参数的意思是将其架设在 Single-Page Application 模式下
# 这个模式会处理即将提到的路由问题
serve -s dist

服务器托管混合云 vue-cli vue-cli3 gradle-3.0 jsf 3.0

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

转载请注明本文地址：https://www.ucloud.cn/yun/97193.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-cli2.0转3.0之项目搭建

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

cikenerd 2019-08-05 15:42 评论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-cli 3.0 源码分析

摘要：写在前面其实最开始不是特意来研究的源码，只是想了解下的命令，如果想要了解命令的话，那么绕不开写的。通过分析发现与相比，变化太大了，通过引入插件系统，可以让开发者利用其暴露的对项目进行扩展。 showImg(https://segmentfault.com/img/bVboijb?w=1600&h=1094); 写在前面其实最开始不是特意来研究 vue-cli 的源码，只是想了解下 n...

yiliang 2019-08-23 15:11 评论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