vue-cli搭建脚手架

274 阅读2分钟

一、安装 node.js

  进入node.js 官网下载即可

image.png

安装完成后可使用:node -v 查看版本号,如果可以显示出来,也就说明node.js已经安装成功了。

二、安装 cnmp

  因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,使用定制的 cnpm 命令行工具代替默认的 npm,速度更快:

npm install -g cnpm --registry=https://registry.npm.taobao.org

完成后输入 cnpm -v ,可以查看当前 cnpm 版本。

或者,也可以安装使用yarn

  yarnfacebook发布的一款取代npm的包管理工具。

//安装
npm install -g yarn

三、安装vue-cli脚手架构建工具

vue-cli提供一个官方命令行工具,可用于快速搭建大型单页应用.

输入命令:cnpm install -g @vue/cli

   检测是否安装成功:vue -V (注意此处的 -V为大写字母,否则会出错)

四、创建项目

    vue create 项目名称

  • 使用以下命令创建一个新项目: vue create vue-cli

   会出现以下选项,其中第一条 a 是自己保存的预设,正常情况下是没有的。

image.png

  • 操作上下箭头进行选择,选择最后一项 ,手动设置 image.png

  • 设置当前需要的功能,选则以下选项(用空格键选中/取消): image.png

  • 回车,进入路由模式的选择,可以直接回车,会默认选择为 yes

image.png

  • 设置css预处理器: image.png

  • 设置ESLint,这里选择正常模式: image.png

  • 选择保存时进行检测: image.png

  • 设置以上选择想要存放的位置: image.png

  • 设置是否需要将此保存为将来项目的预设,给以上选项命名,以便以后调用vue-cli的时候,可以直接得到回值:

image.png

  • 选择yes,输入预设名称: image.png

以后再次创建时,就会出现所保存的预设,

image.png

五、启动项目

  创建完成之后,会出现提示,按照提示输入之后,就可以启动项目了。

image.png

image.png 能够打开显示以下页面,便说明脚手架已经搭建完成 image.png