# 构建一个 iView 项目

# 写在前面

最近学习一下，如何使用 iView 构建一个项目，记录一下过程

# 概念

node.js 与 npm 的关系

node.js是javascript的一种运行环境，是对Google V8引擎进行的封装。是一个服务器端的javascript的解释器。 包含关系，nodejs中含有npm，比如说你安装好nodejs，你打开cmd输入npm -v会发现npm的版本号，说明npm已经安装好。 引用大神的总结: 其实npm是nodejs的包管理器（package manager）。我们在Node.js上开发时，会用到很多别人已经写好的javascript代码， 如果每当我们需要别人的代码时，都根据名字搜索一下，下载源码，解压，再使用，会非常麻烦。于是就出现了包管理器npm。 大家把自己写好的源码上传到npm官网上，如果要用某个或某些个，直接通过npm安装就可以了，不用管那个源码在哪里。 并且如果我们要使用模块A，而模块A又依赖模块B，模块B又依赖模块C和D，此时npm会根据依赖关系， 把所有依赖的包都下载下来并且管理起来。试想如果这些工作全靠我们自己去完成会多么麻烦！

webpack 是什么？

它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。

vue-cli 是什么

用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

# 准备环境

安装 nodejs

下载需要的版本 nodejs 安装即可 相关下载地址：nodejs中文网下载地址

【备注】nodejs 本身是包含 npm 但往往版本不是最新的，所以我们要经常自行升级 npm

升级 npm

命令行运行（WIN系统为 CMD ，MAC 中是 终端）

// 全局安装
npm install -g npm
// 管理员权限安装
sudo npm install -g npm

升级 vue-cli

// 全局安装
npm install -g @vue/cli
// 注意往往需要管理员权限安装
sudo npm install -g @vue/cli

# NPM构建项目

我们使用 vue-cli 初始化一个项目

// 前面我们已经安装并升级了 vue-cli
$ vue init webpack my-project 
// 后续按回车安装默认即可
//进入到创建的vue项目
$ cd my-project
//安装依赖
$ npm install
//启动项目
$ npm run dev 
//启动成功 http://localhost:8080 即可打开测试首页

安装 iview

npm install iview --save

到达这一步，基本上需要 ivew 环境已经都搭建好了，剩下的可以参考 iView 官方快速上手文档

iView 配置 main.js 引入

import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview' // 引入iview依赖
import 'iview/dist/styles/iview.css' // 引入iview css样式

Vue.config.productionTip = false

// 使用iview组件
Vue.use(iView)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
      App
  }
})

Vue 项目引入 Sass

npm 下载依赖

// npm 下载依赖
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

配置

在build文件夹下的webpack.base.conf.js的rules里面添加配置

{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

# 打包上线

npm run build

# 总结语

总结下来，其实已经算是正常的 Vue 项目都可以参考此教程部署了。