学习一样新东西,总感觉成本很高,高就高在一堆莫名其妙的问题,好像只有我一个人会遇到。
如题的安装命令是Vue CLI 2.0 版本的快速开发命令,已经过时,如果还想继续使用并遇到困难,请看本文的第二部分,对你有一些帮助!

第一部分

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g卸载它。然后安装Vue CLI 3.0版本:
npm install -g @vue/cli
创建项目:
vue create hello-world

第二部分 Vue CLI 2.0

❗️
为了保证安装顺利

  1. Windows用户使用管理员运行cmd
  2. mac用户使用命令sudo su -开启root权限
  3. 用来放置webpack模板的文件夹,先取得相关用户的读写权限,这个文件夹在用户>.vue-templates,具体要看你的系统,需要注意的是.vue-templates文件夹可能是一个隐藏文件夹

然后执行以下安装命令:

安装nodejs

顺便会默认装好npm,官网下载地址:
https://nodejs.org/zh-cn/
我选择的是长期支持版

打开终端,查看是否安装成功
node -v
npm -v

更新npm到最新版

npm install -g npm

安装cnpm

出于一些原因,直接使用npm慢、不稳定或者会报错,所以我安装了cnpm
npm config set registry https://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装Eslint

vue-cli脚手架创建的项目默认使用ESlint规则,启动项目的时候因为各种语法报错,不得不先停下了解一下什么是ESlint,及其相关的一下操作。
所以一定确保安装过Eslint
安装命令:
npm i -g eslint

安装vue-cli

cnpm install -g @vue/cli
查看是否安装成功,注意这里是大写V:
vue -V

尝试使用vue init webpack命令

vue init webpack todolist
你会收到如下反馈:

Command vue init requires a global addon to be installed.
Please run npm install -g @vue/cli-init and try again.
大概意思是如果你要使用命令vue init还需在全局下安装cli-init

执行命令:
cnpm install -g @vue/cli-init

执行命令vue init webpack todolist

这里的todolist是项目名称
vue init webpack todolist
运行时任然会出现警告:

# Installing project dependencies ...
# ========================

npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated flatten@1.0.2: I wrote this module a very long time ago; you should use something else.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.

> fsevents@1.2.9 install /private/var/root/todolist/node_modules/fsevents
> node install

node-pre-gyp WARN Using needle for node-pre-gyp https download 
[fsevents] Success: "/private/var/root/todolist/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote

> uglifyjs-webpack-plugin@0.4.6 postinstall /private/var/root/todolist/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
added 1269 packages from 691 contributors and audited 11949 packages in 163.569s
found 12 vulnerabilities (7 moderate, 5 high)
  run `npm audit fix` to fix them, or `npm audit` for details


Running eslint --fix to comply with chosen preset rules...
# ========================


> todolist@1.0.0 lint /private/var/root/todolist
> eslint --ext .js,.vue src "--fix"


# Project initialization finished!
# ========================

To get started:

  cd todolist
  npm run dev

悄悄的选择无视

离线安装

我们可以先去下载:
https://github.com/vuejs-templates/webpack
解压后把文件夹放到以下目录中:
{your username}.vue-templates
然后离线执行安装:
vue init webpack project --offline

精简安装

vue init webpack-simple project

vue init webpack-simple project --offline

卸载npm

npm uninstall npm -g

卸载node

brew uninstall node
接着运行命令删除相关文件夹:
sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}

Logo

前往低代码交流专区

更多推荐