保姆级教学安装Node && Vue手脚架

安装流程

Node安装

众所周知安装Vue手脚架之前必须要安装好nodejs

node 下载链接

选择 msi 安装程序
在这里插入图片描述

这里我直接选择了12以上的版本 之前下载过10.14.0版本在Vue Create的时候报错

安装完我们检查一下自己的版本是否安装成功

node -v   //查询当前版本

如果公司项目过多vue的版本不一致导致来回切换很复杂其实我们可以去github学习下nvm这款工具

nvm github下载链接

mvn是node的版本控制器

$ nvm use 16
Now using node v16.9.1 (npm v7.21.1)
$ node -v
v16.9.1
$ nvm use 14
Now using node v14.18.0 (npm v6.14.15)
$ node -v
v14.18.0
$ nvm install 12
Now using node v12.22.6 (npm v6.14.5)
$ node -v
v12.22.6

这里我们时常会遇到一个坑，在切换版本的时候乱码，不要慌稳住，我们只需要通过管理者打开cmd黑窗口就好了

通过他来完成 nvm use XXX的操作就很丝滑的切换node版本啦

Vue手脚架安装

在安装手脚架的命令前 我们可以先尝试着把npm的镜像地址改为国内阿里云的速度就会更加纵享丝滑了

$ npm install -g cnpm --registry=https://registry.npmmirror.com

接下来我们安装 vue-cli

npm install -g @vue/cli

没有报错我们就是ok的

到了这里我们手脚架就安装成功了 为了验证是否成功我们直接New个VUE项目吧

 vue create yourprojeck

注意这里不要大写 不知道为啥大写就会报错 作为一个业务前端咱就不纠结了毕竟咱们是玩golang的以后有时间再深究！

创建完项目时

按照这个来就够了

相关的命令展示 英文好点的可以自己读下 知道大伙跟我一样比较懒 我直接给大伙粘贴出来了

create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve                                      alias of "npm run serve" in the current project
  build                                      alias of "npm run build" in the current project
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
  info                                       print debugging information about your environment
  help [command]                             display help for command