在前面的vue入门中,不管是vue,router,vuex我们都是通过传统的<script>标签引入的,对于简单的项目这样就足够了。

对于较复杂的项目,我们介绍了用webpack构建项目,webpack配置笔记繁琐,实际上主流的前端框架都有相应的cli帮助快速搭建环境,Vue CLI 就是一个基于 Vue.js 进行快速开发的完整系统。

安装vue cli

node环境安装

Node.js 就是运行在服务端的 JavaScript,vue/cli 脚手架依赖Node,如果本机没有安装node运行环境,请下载node 安装包进行安装。
Node.js默认安装目录为 “C:\Program Files\nodejs”,这里修改为"D:\nodejs"

最新版本:https://nodejs.org/en/ 或者 http://nodejs.cn/能够下载到最新版的node
指定版本:https://nodejs.org/dist/ ,https://npm.taobao.org/mirrors/node/可以下载指定版本的node
Node.js的卸载方法

node环境检测
node -v

如果输出版本号,说明我们安装node 环境成功
在这里插入图片描述

快捷键Windows+R打开运行窗口,在里面输入cmd确定就能打开命令窗口

查看 npm 的 版本号

在这里插入图片描述

NPM(Node Packaged Modules)是随同Node.JS一起安装的包管理工具,是Node.js的包管理器。
NPM的含义有两层,一个是NPM命令npm CLI,指在命令行窗口或终端使用npm命令来管理node包(模块),开发者可以使用npm命令下载、安装、升级、删除包等。
另一个是NPM服务器,NPM服务器网址为http://npmjs.org,NPM是 Node 包的标准发布平台,用于 Node 包的发布、传播;

  • 允许用户从NPM服务器下载别人 编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

npm 中文文档

安装指定版本npm

npm install npm@6.0.0
设置nodejs的global和cache路径(可选)

设置路径能够把通过npm安装的模块集中在一起,便于管理。 在nodejs的安装目录D: \nodejs下,新建node_global和node_cache两个文件夹,设置node_global为全局模块存放路径,设置node_cache为缓存文件夹。
在命令窗口执行指令:

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

设置成功后,后续用命令全局安装的模块会保存在在D: \nodejs \node_global \node_modules里。
也可以在下面命令的弹出窗口中直接修改

npm config edit

查看配置信息的指令:

npm config list
设置淘宝镜像

访问外网比较慢,可以使用淘宝的镜像 https://npm.taobao.org/
打开命令终端输入:

npm config set registry https://registry.npm.taobao.org

可以通过下面的命令查看淘宝镜像是否安装成功

npm config get registry

如果打印出https://registry.npm.taobao.org/证明安装成功
PS:建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题

全局安装vue-cli

npm install -g @vue/cli

查看vue-cli的版本

vue -V

我安装的版本是@vue/cli 4.5.4

配置PATH环境变量

如果在命令行窗口出现使用vue命令,提示'vue' 不是内部或外部命令,也不是可运行的程序 或批处理文件。,则需要配置PATH环境变量,将D:\nodejs\node_global添加到Path中。

PATH环境变量的作用是指定命令搜索路径,在命令行种执行命令时,会到PATH变量所指定的路径中查找,看是否能找到对应的cmd可执行文件。

下面介绍的是windows10中配置环境变量的方法,windows7中到第6步中会发现路径是通过;(分号)分隔的,可以通过相同的方法,将我们的路径添加到最后。

  1. 在电脑找到“计算机”;
  2. 鼠标右键单击“计算机”图标,找到“属性”;
  3. 打开“属性”之后,找到“高级系统设置”,打开“高级系统设置”;
  4. 打开“高级系统设置”之后,找到“环境变量”;
  5. 打开“环境变量”之后,在“系统变量”中找到“Path”;
  6. 找到“Path”之后,选中“Path”,点击下边的“编辑”;
  7. 编辑环境变量窗口中,填写D:\nodejs\node_global,确定即可

在这里插入图片描述

创建第一个项目hello-world

运行以下命令来创建一个新项目

vue create hello-world

这里先选择默认的设置default(babel eslint)
创建成功后,自动生成的目录结构见下图
在这里插入图片描述
要理解这个结构需要有webpack的知识,请见webpack4打包项目入门
vue-cli4提供了图形化界面构建项目,能够以图形化界面创建和管理项目,命令是

vue ui

启动项目

进入项目安装目录,运行命令

npm run serve

在这里插入图片描述
如果在浏览器中能够看到这个界面,那么恭喜你,成功了。

配置项目参数

与package.json文件同级的目录中新建文件vue.config.js来配置项目的参数

module.exports = {
  publicPath: '/', // 默认'/'项目部署在域名的根部
  outputDir: 'dist', // 将构建好的文件输出到dist文件夹
  // 配置 webpack-dev-server 行为。
  devServer: {
    port: 3000 // 端口
  }
  
}

再次执行命令

npm run serve

浏览器中输入网址http://localhost:3000,就能够访问到这个项目了

Logo

前往低代码交流专区

更多推荐