Lei Zhang

时光已逝永不回,
往事只能回味。
... ...
春风又吹红了花蕊,
你已经也添了新岁。

▓▓▓▓▓▓▓▓▓▓▓▓▓▓░ 88%



3Years-5 vue-cli 搭建管理后台

2018-04-16 » 没填完的坑 / 3Years , Tutorial , Vuejs , 环境搭建

项目地址:https://github.com/PassionZale/3Years


着手开始写代码前,我们需要搭建一下前端环境。

1. Nodejs 在 Nodejs 官网下载并进行安装,推荐下载 LTS;

2. Vuejs 官网相关的手册写的非常棒,如果你还不是很熟悉它,收藏这个网址,多看看;

3. vue-router 管理后台会做成一个 SPA,所以 vue-router 也是必须品;

4. webpack-doc Webpack 是一个非常常用的打包工具,可以暂时不深入它,但是你必须明白入口出口loader插件(plugins)这四个概念;

5. vue-vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,在整个管理后台中,它将会存储一些诸如管理员信息、Authorlization Token 等公共信息。不要为了使用 Vuex 而是用 Vuex,如果项目足够简单,那可能真的不需要 Vuex 来做状态管理

6. vue-cli 是一个用来搭建 vue project 的脚手架工具,它提供了六种模板以便你来生成一个 vue project,但是如果你是首次使用 Vuejs,强烈建议首先阅读 Vuejs 官网的教程,然后再来使用它构建 vue project。

7. iview 是一个基于 Vuejs 的高质量组件库,它将被用来构建管理后台的 UI 界面。现在官网上广告可真多啊

8. Git 版本控制工具,2018 了,应该每个开发都会推推(git push)拉拉(git pull)了吧?

9. axios 是一个用于发送 HTTP 请求的 npm package,整个管理后台都会使用它来进行 HTTP Request。

OK,现在假设你已经装好了 1、6、8,大致了解 2、3、4、5、7、9,让我们快速开始吧!


webpack-simple

首先安装好依赖并确定版本, Nodejs≥6.x, 8.x & npm version 3+ & 安装好 Git:

enlightened这些是一年前本地安装的,太懒没有升级版本,如果是现在,还是建议使用 8.x LTS 的 Nodejs!

vue-cli 会通过你给定的模板名称,用对应的模板来生成项目,官方模板总共有6个:webpackwebpack-simplebrowserifybrowserify-simplepwasimple

这里,我们使用 webpack-simple,为什么选择它?

刚接触 Webpack,你可能会被它的各种配置、插件、loader 搞懵,但是我们又确实需要快速开始一个 vue project,不想被它扼制住前进的脚步。webpack-simple 这个项目模板,配置极少,完全可以满足刚接触 webpack 的初学者,极易上手,因此,我选择了它。


创建项目

vue init webpack-simple your_project_path


指定 NPM 源

在使用 NPM 安装依赖之前,由于“墙”的原因,可能会导致下载速度慢,无法下载等等问题出现。

好在现在有很多国内镜像,也有一个帮助我们随意切换 npm 镜像的工具:nrm

npm install -g nrm
nrm ls

* npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/

nrm use taobao

现在我们将镜像切换成了淘宝:

  npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
* taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/

.npmrc

但是有个弊端,当项目被其他人克隆后,无法确保大家的镜像地址都是一致的。在根目录创建 .npmrc 文件:

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org

这样,所有人在进行 npm install 时,npm 都会根据跟目录下 .npmrc 中的配置进行依赖的安装了。


安装依赖

在项目根目录中,运行 npm install && npm run dev,下载过程可能会有点长,下载完毕后,控制台如下,浏览器也会自动打开 webpack-simple 的默认欢迎页:


webpack-simple 不包含 vue-router、vuex、iview,因此我们需要单独安装他们,此外,我们还需要 axios 发送 HTTP 请求,那就将他们一起 install 了吧 frown

npm install vue-router vuex iview axios --save

此外,我们仍需要一种 CSS 预处理语言:

npm install less less-loader --save-dev

至此,整个环境搭建完毕。

1. 使用脚手架工具初始化项目;

2. npm install packages;

3. 额外安装 vue-router、vuex、axios、iview、less。

展开选填信息