vue-cli 3.0

(第一章)学习vue-cli 3.0脚手架构建vue项目

vue学习巩固及遇到的问题

首先此次使用的vue脚手架为vue-cli 3.0,它跟以前的脚手架改变了不少,这里我也没去细细的研究,也只懂得了最基本的用法,参考:html

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

  • 其中值得注意几点:node

1.vue-cli 3 脚手架须要node.js 版本8.9 或更高版本,由于以前项目用的vue1.0,因此node版本用的比较低webpack

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

2.记录下gnvm一些简单经常使用的命令连接描述web

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版本:  一、gnvm有命令(能够去看文档)  二、npm install -g npm@5.0.1

3.vue-cli 3 灵活 配置都做为插件 项目构建好后也能够随时加插件,插件文档连接描述vue-cli

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

具体的命令:
            用法: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,如今须要json

  • npm install -g serve # -s 参数的意思是将其架设在 Single-Page Application 模式下 # 这个模式会处理即将提到的路由问题 serve -s dist
相关文章
相关标签/搜索