从零入门 Vue-cli3 爬坑阶段 home 编辑时间 2019/07/24 ## 前言 作为一个java出身的后端程序员，学vue一直仅限于学基本语法。每次只能在webstorm新建一个空的html，然后开始一行一行码。这次是第N次决定要从零自学nodejs、vue-cli。在此笔记中记录下掉坑爬坑的折腾过程。 ## 系统环境 这次特地切换到linux deepin下进行学习。就是怕windows的环境折腾起来有坑。所有后文中所有安装命令，都是基于linux的。 ## 准备工作 上手为了避免掉node版本的巨坑，先装nvm。 NVM全称是Node Version Manager (node版本管理器) github地址：https://github.com/nvm-sh/nvm 可以在releases中看到，目前的最新版本是0.34.0 linux下的傻瓜式下载安装命令如下（二选一） ```shell # 如果你有安装过curl 就用这条 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash # 或者你有安装过wget 也可以用这条 wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash ``` 执行以下命令，确认是否安装正确 ```shell nvm --version # 我这里的运行结果是 0.34.0 ``` 注意：如果在这步出现类似找不到nvm命令之类的报错，可能是安装的时候没有安装在当前用户下，例如我用root用户安装的nvm，只能在root下调用nvm命令。 其他常用命令 ```shell # 查看所有可安装node的版本 nvm ls-remote # 安装指定版本的node nvm install v8.16.0 # 查看本地已安装的node版本 nvm ls ``` 这里下一步是要折腾vue-cli，官方文档建议的node版本是`8.11.0+` 我这里安装的node版本是`8.16.0` 顺便更新一波npm版本 ```shell # 查看当前版本 npm -v # 更新到最新版本 npm install -g npm ``` 顺便装个淘宝提供的cnpm ```shell # 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org ``` **使用方法：以后所有的 npm install 都可以替换成cnpm install 会自动改用阿里镜像源，在国内用，速度是国外源的N倍** ## 正式开始 参考官方的指南： https://cli.vuejs.org/zh/guide/installation.html 接下来才开始正式登场主角，vue-cli安装 ```shell # 安装vue-cli cnpm install -g @vue/cli # 查看版本号 vue --version # 再安装个全局依赖 用于支持vue serve 和 vue build 命令 cnpm install -g @vue/cli-service-global ``` ## 未完待续 送人玫瑰,手留余香 赞赏 Wechat Pay Alipay 从零入门 Vue-cli3 基于 element 写个管理后台 准备阶段 Linux Deepin 15.10.2 桌面主题美化
