开始创建项目

vue-ui

创建者：李浩

检查依赖

• 这里您将检查运行项目所需要的依赖工具
• 如果您已经检查过了，请跳至开始构建项目

1.安装node

如果您未安装node，请前往node官网下载nodejs
在node.js中文官网正常下载安装node.js就可以。

安装时请保持所有默认配置。

在官网下载安装node.js后，就已经自带npm（包管理工具），不需要另外再安装npm了。
打开命令行，输入

node -v

输出版本号，即表明安装成功。

2.安装npm包

这里不是必须的，只是告诉你如何安装项目依赖的npm包
待你下载了源代码后你才需要安装项目所需的npm包。

在项目的文件夹下运行

npm install [name]

如你想安装axios，你可以输入npm install axios
即可安装对应的npm包

有时npm下载会很慢，你可以使用淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

-g 表明全局安装，表明你可以在任意文件夹下导入并使用这个包。

之后你就可以将npm换成cnpm来安装包了

cnpm install [name]

额外的功能

安装包，同时写入package.json的运行依赖里

npm i [name] -S

安装包，只写入package.json的开发依赖里（即这个包只在开发时用）

npm i [name] -D

如果你想了解更多关于npm如何使用，你可以查看npm 与 package.json 快速入门 或 npm 中文文档

3.安装webpack

npm install webpack -g

安装成功后输入

webpack -v

如果出现相应的版本号，则说明安装成功。

4.安装依赖

进入项目文件夹，运行

npm install

即可下载好项目依赖的npm包。

5.运行项目

依赖安装好后，运行

npm run serve

或

npm run dev

不同项目的命令可能是不一样的，具体请查看package.json或询问项目创建者。

6.打包项目

进入项目文件夹，运行

npm run build

即可在项目根目录下看到/dist文件夹，部署在服务器上即可。

打包好的文件夹名可能不一样，具体请询问项目创建者。

PS. 额外的GUI工具

vue项目额外提供了一套ui工具来帮助你运行项目

1.安装vue ui

npm install -g @vue/cli

如果不成功，请将npm换成cnpm

如果成功，你可以输入以下命令

vue -h

看到成功提示。

2.运行vue ui

在命令行中输入

vue ui

就会启动一个本地服务，过一会，浏览器会自动打开引导页
如果你想了解如何使用，你可以搜索一下教程，vue-cli 3.0 UI控制台初体验

（1）导入项目：

可以导入本地的项目进控制台管理

点击导入，选择项目文件夹后导入这个文件夹。

（2）管理项目：

可以列出已有的项目，此时可以看到刚刚新建的项目。

进入你要的项目，点击任务-serve来运行开发任务。

运行成功后在浏览器打开localhost:8080或点击启动app即可。

如果你不知道如何配置，你可以查看配置文档

3.安装vue-devtools

vue-devtools是一款浏览器插件，用于很方便的调试vue应用，这可以极大地提高我们的调试效率。

如果你能翻墙，你可以直接从chrome商店下载安装。

如果你无法翻墙，你可以询问其他人或项目管理者是否有crx包，拖入浏览器即可。

你也可以在网上搜索crx包，或者在Chrome Extension Downloader的输入框输入

nhdogjmejiglipccpnnnanhbledajbpd

点击下载即可

7.安装git

前往git官网下载git，直接安装即可
在命令行中输入

git --help

出现帮助提示，即表明安装成功。

你可以使用一些可视化的git工具来帮助你使用git管理和提交代码，如TortoiseGit

请先安装了git再来安装这些git的可视化工具

如果你忘记了git如何使用，你可以google一下，或查看git简易指南或git教程

开始构建项目

1.从git下载源代码

在你想要放项目代码的地方打开命令行，输入

git clone '远程git地址'

即可下载远程git仓库的代码。

2.安装依赖

输入

cd '文件夹名'

进入项目文件夹。运行

npm install

如果不成功，可以将npm换成cnpm重试

3.运行项目

进入项目文件夹。运行

npm run serve

即可以开发模式启动项目。

4.发布项目

进入项目文件夹。运行

npm run build

打包成功后，你会看到一个dist文件夹，里头即是打包好的文件了。

相关教程

1.vue

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

2.element-ui

element-ui是饿了么官方推出的一套基于vue的组件库，在构建后台管理系统方面有独特优势。

3.echarts

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。