一、安装 node.js
进入node.js 官网下载即可
安装完成后可使用:node -v 查看版本号,如果可以显示出来,也就说明node.js已经安装成功了。
二、安装 cnmp
因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,使用定制的 cnpm 命令行工具代替默认的 npm,速度更快:
npm install -g cnpm --registry=https://registry.npm.taobao.org
完成后输入 cnpm -v ,可以查看当前 cnpm 版本。
或者,也可以安装使用yarn:
yarn是facebook发布的一款取代npm的包管理工具。
//安装
npm install -g yarn
三、安装vue-cli脚手架构建工具
vue-cli提供一个官方命令行工具,可用于快速搭建大型单页应用.
输入命令:cnpm install -g @vue/cli
检测是否安装成功:vue -V (注意此处的 -V为大写字母,否则会出错)
四、创建项目
vue create 项目名称
- 使用以下命令创建一个新项目:
vue create vue-cli
会出现以下选项,其中第一条 a 是自己保存的预设,正常情况下是没有的。
-
操作上下箭头进行选择,选择最后一项 ,手动设置
-
设置当前需要的功能,选则以下选项(用空格键选中/取消):
-
回车,进入路由模式的选择,可以直接回车,会默认选择为 yes
-
设置css预处理器:
-
设置ESLint,这里选择正常模式:
-
选择保存时进行检测:
-
设置以上选择想要存放的位置:
-
设置是否需要将此保存为将来项目的预设,给以上选项命名,以便以后调用vue-cli的时候,可以直接得到回值:
- 选择yes,输入预设名称:
以后再次创建时,就会出现所保存的预设,
五、启动项目
创建完成之后,会出现提示,按照提示输入之后,就可以启动项目了。
能够打开显示以下页面,便说明脚手架已经搭建完成