vue-cli脚手架搭建vue——第一天

所有安装几乎都是用cnpm完成

 

1. 下载并安装node.js，官网下载地址：https://nodejs.org/en/，选择适合的版本（建议稳定版，目前稳定版本是8.11.1）

2. 配置淘宝NPM镜像，使用淘宝镜像可以使后面安装更加快速稳定。官网教程：http://npm.taobao.org/

    我使用的是cmd命令：打开dos窗后后，输入

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

完成后可以输入cnpm -v查看版本，如能显示版本信息，则表示成功

3.  全局安装vue-cli脚手架工具：

    cnpm install -g vue-cli    

 “-g”表示是全局安装

 安装完成后，使用vue -V来查看vue版本，注意这里的-V是大写

4. 安装webpack，如果不写明webpack版本，则默认安装的是的当前最新版本（当前最新版本是4，3和4两个大版本之间的差别较大，webpack4见上一篇博文）,也可以在安装时指定webpack的版本：cnpm install webpack@3.10.0 -g(使用@连接webpack和版本号，-g表示全局安装）

5. 在电脑某个目录下新建文件夹，我这边新建“vuedemo”(在新建vue项目的时候，项目名中不能出现大写，所以如果习惯项目名等于文件夹名，文件夹名中就不能存在大写字母）,然后在dos窗口，使用cd切换路径至该文件夹下后使用webpack模板初始化vue项目：vue init webpack

当然也可以不新建文件夹，使用：“vue init webpack 文件夹名”，这样vue就会在当前目录下新建一个文件夹。

在初始化过程中首先会要求你你输入项目名（project nane），如果回车就表示用当前文件夹名作为项目名，需要注意的是项目名不能有大写英文。

接下来还会提示要求输入一些项目信息（除了最后一步提示），如果不确定，可以直接回车使用默认值，这些信息可以后期在项目根目录下的package.json中进行修改。

在最后一个提示“Should we run `npm install` for you after the project has been created?” 中可以选择否，然后自己使用使用cnpm安装依赖：cnpm install，而不是用官方推荐的npm。当然直接回车也没问题，只是安装速度回相对慢点

完成后就可以在项目文件夹下面看到一个基于 webpack 的 vue.js 项目

 

如果从网上下载了现成的vue项目，可以使用cnpm install 或者cnpm install --save-dev来安装需要的依赖，这些依赖的信息可以在根目录下的package.json文件内找到。下载的依赖都会在node_modules文件夹下面

需要注意的是node_modules会记录当前项目信息, 包括项目位置, 所以项目名更改或者位置移动等, 需要重新下载依赖