时间戳

首页 > 技术文章 > Vue-cli的安装和使用

Vue-cli的安装和使用

zhangruifeng 2020-07-13 14:07 原文

Vue-cli的安装和使用

安装node环境

nodejs是一个JavaScript的运行环境，可以使得JavaScript不依赖浏览器运行。

由于我采用的Mac环境，所以安装方式略有不同，windows上安装node只需要在 node官网下载windows版本的msi包安装，会自动配置环境变量。

安装成功以后可以在控制台输入以下命令测试：

    node -v #查看安装版本
    npm -v #查看npm安装版本

配置淘宝镜像

由于node要经常使用npm命令下载一些依赖，国外的镜像速度极慢，并且会导致下载失败等问题，所以建议配置国内的淘宝镜像。配置方法如下：

#设置淘宝镜像
npm config set registry https://registry.npm.taobao.org
#测试是否安装成功
npm config get registry

安装vue-cli

Vue-cli是vue项目的脚手架，可以快速搭建一个Vue项目。全称是Vue Commond Line而不是（Vue Client），由于vue-cli2.x-已经过时，这里介绍的是vue-cli3.x、4.x的安装的方式。注意：需要node.js8.9+的版本。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装成功后可以通过vue命令检测是否安装成功，使用vue --version命令查看vue-cli版本，注意：这个命令查看的是vue-cli的版本，而不是vue的版本！

使用vue-cli+element创建项目

vue create my-app
cd my-app
vue add element

vue ui介绍

vue ui是vue3.x版本后的新特性，意在使用图形化界面快速搭建一个脚手架项目，并且创建出的项目可以做到近乎0配置，直接使用。类似于SpringBoot约定大于配置的思想。

使用vue ui创建项目

在控制台中输入vue ui，尽量在要创建项目的父目录中输入

vue ui
#安装慢可以执行
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

在浏览器弹出的页面中点击红色箭头指向的内容

点击创建，指定项目的父目录，点击在此处创建项目按钮开始创建项目

配置项目文件夹的名称、包管理器（建议选择npm），以及是否初始化本地git仓库，点击下一步。

选择创建方式：

  • 创建方式中可以保存之前创建项目的配置模板

  • 默认（一切都使用默认的配置，但是之后还可以修改）

  • 手动 自行选择需要安装的模块

  • 从git仓库中拉取

这里我们先选择手动，然后点击下一步：

选择需要引入的模块，默认包含了Babel、Linter、这里我额外选择了Router。在配置完成后点击下一步

由于上一步引入了Linter，这里需要配置错误检测机制，按照如下配置即可：

此时点击完成创建，会提示是否要保存为新预设，如果选择保存需要指定一个预设名，下次创建的时候就会有这个“模板”，之后使用此“模板”创建的项目都会使用这样的配置。这里我们先选择不保存预设。

等待片刻后项目就创建成功了。。。

在项目创建成功后，还可以继续依赖其他内容以及安装新插件

安装elementUI插件

依赖也可以在vue ui中添加

还可以在vue ui中启动、编译、检查项目问题等操作

注意：使用mac创建的项目可能会有访问权限问题 可以使用chmod -R 777 fieldname命令解决

推荐阅读