zZ爱吃菜

[前端] 记录我是如何构建一个 iView 项目的

写在前面

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

目录

  • 概念解释
  • 环境准备
  • NPM构建
  • 项目配置
  • 打包上线

正题

概念

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 项目都可以参考此教程部署了。

码字很辛苦,转载请注明来自L&N 博客《[前端] 记录我是如何构建一个 iView 项目的》

评论