xieyezi

前言

学了 Vue 也算是有段时间了,我看了一下自己的博客记录,居然没有一篇写如何搭建 Vue 开发环境的,于是才有了这篇博文.现在前端的开发更趋向于工程化、模块化,所以使用 Vue-Cli 是非常必要的.基本来说,要将 Vue 项目跑起来,要用到以下工具:

  • Node.js
  • npm
  • webpack
  • Vue-Cli

其中我说一下 Vue-Cli.Vue-Cli 称为脚手架,其实说白了就是命令行工具,通过这个工具,你可以在命令行初始化工程项目,帮你迅速搭好工程框架.下面来说说到底如何搭建 Vue 开发环境并运行你的第一个 Vue 项目吧.

安装步骤

  1. 安装Node.js

到官网去下载相应到版本,然后一路点击下一步迅速安装好

  1. 查看是否安装成功
node -v

如果出现版本号,说明安装成功 注：如果是 Mac,记得输入以下命令更改 Node.js 目录的访问权限

sudo chmod -R 777 /usr/local/lib/node_modules/
  1. 新建工程目录

在你的电脑任何你喜欢的位置新建一个文件夹 启动你的命令行进入你刚刚新建的文件夹目录下

  1. 全局安装 npm

能翻墙的同学请打开翻墙执行以下命令进行安装

npm install -g npm

不能翻墙的同学也没关系,请使用以下命令进行安装

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

在这里,我们使用了淘宝镜像进行安装,记住,以后所有以 npm 开头的命令,不能翻墙的同学都要以 cnpm 代替

  1. 全局安装 webpack
npm install webpack -g

同学你记住我刚刚说的话没有,如果你不能翻墙,请把上面 👆 这条命令的 npm 换成 cnpm

  1. 全局安装 Vue-Cli 脚手架
npm install vue-cli -g

完成了上面的 6 步,恭喜你,现在可以搭建项目了.

  1. 搭建项目

在你的电脑里面随便一个你喜欢的位置,新建一个文件夹

  1. 打开命令行,进入到你刚刚创建的文件夹目录下
vue init webpack projectName("项目的名字,不能使用中文哦")

接着会有一些基础的配置信息需要你填,记住,需要你选择(y/n)的,你现在都先选择 n. 完成了这一步,你就可以在你刚刚新建的文件夹里面看见新建的项目了.

  1. 安装依赖包

现在利用命令行进入到你的项目文件夹根目录下

npm install
  1. 跑起来
npm run dev

Vue 一般是走 8080 端口,打开你的浏览器,进入 locallhost://8080,就可以看见你的第一个 Vue 项目运行起来了.