vue + webpack + install 学习笔记之构建前端项目

一、安装环境

1、安装Node.js环境，即前端项目的运行环境，安装方法如下：
在https://nodejs.org/zh-cn/download/下载LTS版本的node-v8.9.4-x64.msi文件，下载完成后双击运行，即可安装。
安装完成则自动安装好了npm这个包，并且自动将路径配置到系统路径中，打开cmd窗口，通过如下命令查看是否安装成功：

node -v --查看当前node版本
npm -v  --查看当前npm版本

安装成功时可查看到具体的版本信息。
2、安装cnpm ，即淘宝镜像，下载包时去淘宝镜像下载会比原始的npm速率快：

npm install cnpm -g --安装cnpm，-g代表全局
cnpm -v --查看当前cnpm版本

3、安装webpack：构建前端项目的工具，安装好后可以使用npm run dev命令，将前端项目自动打包为浏览器可以识别的语言。

npm install webpack -g --全局安装webpack
npm install webpack-cli -g  --全局安装webpack-cli
webpack -v --查看当前webpack版本

4、安装vue-cli

npm install vue-cli -g --全局安装vue-cl

二、构建项目

以上的基础环境安装完成后，即可开始创建一个前端项目，创建方法如下：
1、新建一个文件夹，用于创建前端项目，如创建一个文件夹叫：test-web
2、打开cmd窗口，进入test-web文件夹，在test-web文件夹中构建项目：

vue init webpack my-project

3、运行上述命令后，cmd界面中会逐一出现下述提示，引导你输入项目的名称、创建人等信息，按照下图输入对应内容即可：

Project name my-project               --项目的名称，直接默认回车
Project description A Vue.js project  --项目描述，直接默认回车
Author syf                            --作者姓名，输入名字（syf）回车
Install vue-router? Yes               --是否安装路由，输入y回车
Use ESLint to lint your code? No      --是否用ESLint规范代码，输入n回车
Set up unit tests No                  --是否需要单元测试，输入n回车
Setup e2e tests with Nightwatch? No   --是否需要单元测试，输入n回车

4、上述步骤完成后，即在test-web文件夹下，构建了一个叫做my-project的前端项目。
5、在cmd中进入my-project文件夹，执行如下命令：

cnpm install --安装依赖
npm run dev --启动项目

上述命令执行完毕后，cmd界面最后会显示该前端项目已启动成功：Your application is running here: http://localhost:8083。
此时，访问http://localhost:8083即可访问项目。