VUE+IVIEW从无到有实践（一）

搭建VUE+IVIEW脚手架和npm命令构建完成项目

一.必备条件 Node Js：

（简单的说 Node.js 就是运行在服务端的 JavaScript。安装 教程https://www.runoob.com/nodejs/nodejs-tutorial.html，Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/。

32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

）

      安装好了node js，查看版本

C:\Users\Administrator>node -v
v11.0.0

二 安装npm命令

（NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题。介绍地址https://www.runoob.com/nodejs/nodejs-npm.html）

NPM总结：

1. 说明：NPM（节点包管理器）是的NodeJS的包管理器，用于节点插件管理（包括安装，卸载，管理依赖等）

2. 使用NPM安装插件：命令提示符执行npm install <name> [-g] [--save-dev] 
<name>：节点插件名称。 
   例：npm install gulp-less --save-dev

3. -g：全局安装。 将会安装在C：\ Users \ Administrator \ AppData \ Roaming \ npm，并且写入系统环境变量;非全局安装：将会安装在当前定位目录;全局安装可以通过命令行任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过要求（）调用;

4. --save：将保存至的package.json（的package.json是的NodeJS项目配置文件）

5. -dev;：保存至的package.json的devDependencies节点，不指定-dev将保存至依赖节点

如果你安装的是旧版本的 npm，可以很容易得通过 npm 命令来升级

C:\Users\Administrator>npm -g install npm

$ npm install express

安装好之后，express 包就放在了工程目录下的 node_modules 目录中，因此在代码中只需要通过 require('express') 的方式就好，无需指定第三方包路径。

三 查看npm版本

C:\Users\Administrator>npm -v
6.4.1

四设置镜像

npm install -g cnpm --registry=https://registry.npm.taoba
o.org
或者
npm config set registry=https://registry.npm.taoba
o.org

如果公司代理服务器，需要

npm config set proxy =https://10.X.X.X

五 安装vue-cli 脚手架

 

1．什么是vue-cli（https://cli.vuejs.org/zh/guide/）

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 搭建交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack（https://www.webpackjs.com/concepts/）的项目模板。

vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板，是为现代前端工作流提供了 batteries-included

（webpack本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle）

C:\Users\Administrator>cnpm install -g vue-cli

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

6.创建项目

切换到 项目目录下（自己随意指定）

C:\Users\Administrator>cd D:\vue-workspace

C:\Users\Administrator>D:

D:\vue-workspace>vue init webpack javalsj-vue

7.安装cnmp

  切换到项目中 （如果执行了npm install -g cnpm --registry=https://registry.npm.taoba
o.org会自动已经安装了  其版本cnpm -v）

D:\vue-workspace>cd javalsj-vue
D:\vue-workspace\javalsj-vue>cnpm install

8启动项目

D:\vue-workspace\javalsj-vue>npm run dev

9访问日志中给出的路径

验证项目是否成功

10 安装iview

D:\vue-workspace\javalsj-vue>npm install iview --save

11.安装axios请求控件

D:\vue-workspace\javalsj-vue>cnpm install axios

12 bulid项目

D:\vue-workspace\javalsj-vue>npm run build