搭建VueMint-ui框架

搭建VueMint-ui框架

2018年01月07日 22:29:58

阅读数：2660

vueweb

vue project

检查项目环境

一、检查是否安装node.js

# 检查node版本
$ node -v
# 如未安装
$ brew install node 
# 或者 
$ npm install node

• 1
• 2
• 3
• 4
• 5
• 6
• 7

二、安装vue.js环境

# 全局安装 vue-cli
$ npm install --global vue-cli

• 1
• 2
• 3
• 4

三、创建vue项目

# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖
$ cd my-project
$ npm install
# 安装路由
$ npm install vue-router

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

四、引入 Mint-ui

# Vue 2.0
$ npm install mint-ui -S
# 引入全部组件
import Mint from 'mint-ui'
Vue.use(Mint)

• 1
• 2
• 3
• 4
• 5

五、运行、编译、打包

# 运行项目 localhost:9000
$ npm run dev

# 编译项目,打包
$ npm run build

# 构建产品并查看包分析器报告
$ npm run build --report

# 运行单元测试
$ npm run unit

# run e2e tests
$ npm run e2e

# run all tests
$ npm test

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

六、目录结构

├── VueWeb
│   ├── build                         #构建脚本目录
│   ├── config                        #构建配置目录
│   ├── node_modules                  #依赖的node工具包目录
│   ├── src                           #源码目录
│   │   │   ├── assets                #资源目录
│   │   │   │   └──logo.png
│   │   │   ├── components            #组件目录
│   │   │   │   └── HelloWorld.vue
│   │   │   ├── router                #路由配置
│   │   │   │   └── index.js
│   │   │   ├── App.vue               #页面级Vue组件
│   │   │   ├── main.js               #页面入口JS文件
│   ├── static                        #静态资源目录
│   ├── test                          #测试文件目录
│   ├── index.html                    #入口页面
│   └──package.json                   #项目描述文件