vue-cli搭建项目详细教程

一、准备工作

安装node.js
进入node.js官网下载node.js,下载完成之后双击安装,完成之后进入cmd命令行(不会打开cmd?widows键 + R键,输入cmd,回车!),输入node -v ,出现版本号就表示安装成功,如图:vue-cli搭建项目详细教程
安装npm
知道为啥先让你安装node.js不?因为node.js已经集成了npm,所以安装node.js的时候npm也已经安装好了。不信你就在命令行中输入 npm -v 来测试一下,看有没有版本号!
同学别走,我教你安装cnpm(淘宝镜像):命令行输入 npm install -g cnpm --registry=https://registry.npm.taobao.org,安装完成以后,你绝大部分的npm ****命令都可以用cnpm ****代替了,比npm快多了!

二、全局安装vue-cli

打开cmd,输入npm install --global vue-cli(敢这么输打死你!输入 cnpm install --global vue-cli)。

三、利用vue-cli搭建项目

  1. 想一想你想在哪个磁盘下的那个文件夹中搭建你的项目,想好之后,在你想的那个文件夹下打开cmd命令行。不会?右手按住shift左手单击右键,然后单击“在此处打开命令窗口”。(对,我有《权力的游戏》资源!)vue-cli搭建项目详细教程
    输入 vue init webpack project(project是你搭建的项目名称,请*发挥!)
  2. 然后,开始和终端对话吧!
    vue-cli搭建项目详细教程
    我喜欢一路回车,你也可以自己选择。这几个配置选择yes 或者 no 对于我们项目最大的影响就是,如果选择了yes 则生成的项目会自动有相关的配置,有一些loader我们就要配套下载。所以如果我们确定不用的话最好不要yes,要么下一步要下很多没有用的loader。
  3. 等待…
  4. 完成。打开project文件夹,是这样婶儿的over!vue-cli搭建项目详细教程