搭建Vue项目【最后附Mint】

vue文档：https://cn.vuejs.org/v2/guide/

1、检查npm和node版本

node.js下载地址：http://nodejs.cn/download/

图1 查看版本号

2、全局安装vue-cli

命令【npm install --global vue-cli】

图2 搭建全局vue脚手架

3、进入你的项目目录，创建一个基于 webpack 模板的新项目

命令【vue init webpack 190926mint】

图3 新建vue项目

4、进入项目，启动项目命令【npm run dev】

浏览器输入：http://localhost:8080

图4-1 启动成功后返回项目地址

图4-2 项目执行成功预览页面

***5、项目加 Mint UI

文档：http://mint-ui.github.io/docs/#/zh-cn2/

步骤一：安装Mint UI。

npm 安装

推荐使用 npm 的方式安装，它能更好地和webpack打包工具配合使用。

命令【npm i mint-ui -S】

完整引入

在 main.js 中写入以下内容：

import Vuefrom 'vue'

import MintUI from 'mint-ui'

import 'mint-ui/lib/style.css'

import Appfrom './App'

import routerfrom './router'

Vue.config.productionTip =false

Vue.use(MintUI)

/* eslint-disable no-new */

new Vue({

el:'#app',

  router,

  components: { App },

  template:''

})

以上代码便完成了 Mint UI 的引入。需要注意的是，样式文件需要单独引入。