Vue使用vue-cli创建项目

本文介绍了Vue使用vue-cli创建项目，分享给大家，具体如下：

vue-cli 是一个官方发布vueJS项目脚手架：https://github.com/vuejs/vue-cli

我创建的模板项目：https://github.com/Aleczhang1992/my-vue-project/tree/dev

一、步骤

1.要求已安装Node.js (>=4.x, 6.x preferred) and Git.

可以设置cnpm可以提升依赖包下载速度：

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

安装vue-cli

sudo npm install -g vue-cli

2.创建模板项目

命令格式：vue init <template-name> <project-name>

其中template-name是可选模板项，project-name是创建项目的名称。目前提供一下几种：

也可以使用自定义的模板，可以来自远端托管仓库或本地。

选用webpack模板项目：https://github.com/vuejs-templates/webpack

二、Mint_UI框架的使用

1.完整引入

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

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'
Vue.use(MintUI)
new Vue({
 el: '#app',
 render: h => h(App)
})

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

2.按需引入

安装 babel-plugin-component：

npm install babel-plugin-component -D

将 .babelrc 修改为：

{
 "presets": [
  ["es2015", { "modules": false }] ],
 "plugins": [["component", [
  {
   "libraryName": "mint-ui",
   "style": true
  }
 ]]]}

引入方式如下

import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import App from './App.vue'
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Cell)
 */
new Vue({
 el: '#app',
 render: h => h(App)
})

创建项目过程中有一下几个问题：

1.本地开发状态启动项目时，常会有代码空行、分号报错的问题。 原因：在创建项目时，选择了使用eslint语法校验。

2.引入样式报错问题，babel无法编译css文件。

Module not found: Error: Cannot resolve module 'mint-ui/style.css'

原因：全局引入需要引入样式，如果在.babelrc中设置过按需引入，则不要再专门引入css.