基于vue-cli搭建vue项目开发环境

前言：

手里面有一套vue的教程，因为之前了解到vue-cli脚手架工具，搭建项目很方便，但是教程中是自己一步一步在搭建，我想使用vue-cli自动搭建，但是毕竟教程中自己搭建和自动搭建的有一些不同，教程中讲的很详细，但是我自动搭建的不知道和他自己搭建出来有哪些功能相同，那些还需要自己来配置，哪些不需要配置，这些都不是很清楚，所有引申出来了一系列的问题，所以学的时候就踩了很多坑（学过的应该知道vue各种报错），中途一直也在百度，但是大佬博客虽多，可能有的问题真是我们需要的，但是大佬在写解决办法的时候，实在是不清楚，导致花了大量的时间解决问题，（在此也呼吁各位大佬在写博客的时候，麻烦多谢几个字，毕竟好不容易看到能能解决问题的方法，但是有不清楚如何操作，那种感受不知道各位经历过没有），接下来，我把自己搭建的过程和中途的一些坑分享个大家

一、安装vue-cli

vue-cli是vue的脚手架工具，用于快速搭建vue项目。让开发者只关心项目本身，而不去关注项目的开发环境。
在安装vue-cli之前，我们先安装webpack，在命令行工具输入下面代码。

npm install --save-dev webpack

安装完成之后输入webpack -v，如果出现相应的版本号，则说明安装成功
再在命令行工具输入下面的代码，回车即可安装。（报错的可以使用cnpm试试，最后的图片中有提到），这里就默认你安装node.js

npm install -g vue-cli

二、使用vue-cli创建项目

命令行输入下面的代码开始搭建项目

vue init <template-name> <project-name>

其中的<template-name>是项目模板，<project-name>是你的项目名称
template-name包括：

webpack

webpack-simple // 一个简单webpack+vue-loader的模板，不包含其他功能。

browserify // 一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。

browserify-simple // 一个简单Browserify+vueify的模板，不包含其他功能。

pwa // 基于webpack模板的vue-cli的PWA模板

simple // 一个最简单的单页应用模板

常用webpack就行了，其他模板我也没用过，感兴趣的自己可以去试试

vue init webpack my-project

我们输入命令后会让用户输入几个选项

注意：项目的名称这里不能大写

Project name : 项目名称，如果不需要更改直接回车就可以了。注意：这里不能使用大写。
Project description: 项目描述，默认为A Vue.js project,直接回车，不用编写。
Author：作者，如果你有配置git，他会读取.ssh文件中的user。
Install vue-router? 是否安装vue的路由插件，Y代表安装，N无需安装，下面的命令也是一样的，稍微大一点的项目一般我们都会用到的。
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。这个可以选NO，不然，提示太多了说很烦。
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha。
Setup e2e tests with Nightwatch? 是否安装e2e来进行用户行为模拟测试。
Should we run npm install for you after the project has been created?(recommended)npm

询问你使用npm安装还是yarn安装包依赖，我这里选择的是npm，yarn更快更好，使用yarn之前确保你的电脑已经安装yarn。

三、运行项目

项目搭建完成后，我们需要进入项目跟目录中初始化项目，cd进项目跟目录，输入npm i。

npm i

项目初始化完成后就会在跟目录中多一个node-modules文件夹，这里面放了项目中用到的依赖。
我们来看一下项目目录

接下来我们的操作一般都在src文件夹中，其他的文件中有一些配置，配置好了就不用去关心，我简单说下这几个重要的文件夹

assets 这个文件夹中存放一些资源，比如我们需要的css样式文件，字体文件，JS文件一般都放在这个文件夹里面
component 这个文件夹是放组件的文件夹，就是相当于是项目中的每个小项目的文件放的是.vue文件
router 是存放路由文件夹，里面有个.js文件，用来配置路由，
App.vue 相当于是我们的整个项目的一个汇总文件。
main.js 页面的入口文件，所有用到的文件都需要在这里面导入，最终渲染到页面。
另外还有两个配置文件build文件下的webpack.base.conf.js和package.json，这两个进行项目的一些其他配置，

运行下面命令（工具安装完成后，其他命令都是在项目的跟目录下运行的）

npm run dev

这样我们的项目就可以跑起来
在浏览输入http://localhost:8080就可以看到默认的项目了，

项目搭建就说到这里了，接下来我说一下我在搭建和运行中的一些问题，

四、总结

1、关于mint-ui

我在项目开发中用到mint-ui组件和mui库，mint-ui是需要安装依赖的，大家可以去官网看看API文档，

cnpm  install mint-ui --save-dev

依赖安装完成后，如果要样式生效的话，还需要导入样式文件，但是。我们为了避免导入样式文件的话我们还需要安装babel-plugin-component 插件，

cnpm install babel-plugin-component -D

安装完babel-plugin-component 插件后，还需要在.babelrc文件中进行配置，即是在plugins属性后面添加

["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]

这样ming-ui样式才能生效

2、关于mui

在使用mui过程中，mui就想是bootstrap一样，需要引入样式文件，这里需要注意的，样式文件不只是css文件，还需要一些字体文件，但是字体文件并不需要导入到项目，我大胆猜测，应该是css文件中引入了字体文件，用的路径是基于css文件的，所以我们在使用mui时一定要将css文件和fonts文件一并放入到项目中。

3、关于css样式

在导入公共样式的时候，如果用的是scss的话是需要安装依赖的

cnpm i scss-loader -D

安装完成后，打开webpack.config.js 配置这个文件，在module节点里面的rules属性，这个属性是个数组，存放所有第三方的匹配和处理规则。

这是我们在项目中遇到的一些问题，希望对大家有所帮助，这么一总结感觉没什么太大问题了，我们在网上看到了一张vue-cli的图总结得很不错，我加了一些东西在上面。综上所述全凭个人理解总结，若表述有误，还望各位及时告知，以免混淆。