大家好，我是苏日俪格，这篇文章可能会有一些遗漏的地方，当初写完没有保存，结果好多后来写的都没存上重新又写的，有问题的地方望读者告知，谢谢！

看到文章名字就大致清楚，本文是在vue脚手架下使用Element和less技术进行开发的一个demo讲解。在之前的Vue项目中的一些问题这篇文章中，我虽然不推荐用vue-cli，但是项目中很多时候不得不用vue-cli（ps:这并不是在打自己的脸哦），毕竟尤大大开发这东西太新鲜，没有理由不用他；于是乎开始构建一个新的项目，由于个人不喜欢安装全局的东西，毕竟每个项目的需求不同，所以安装的框架以及构建工具的版本也是不同的，而vue-cli官方的做法就是安装全局的，我反其道而为之，结果遭到了一大波error的攻击，接下来我等待的就是一下午的折磨…

还好vue的生态系统够大，社区活跃度也很高，去了好多站点发了相关帖子包括尤大大的github也留下了我的脚印，最后找到了问题所在。

安装webpack

在看这个问题之前首先要保证电脑中存在node环境，因为下面都需要在node环境下用npm包管理工具会很慢，所以下面可以选择用cnpm淘宝镜像
新建一个目录，输入dos命令npm init初始化项目
开始安装本地webpack：npm install webpack webpack-cli -D，由于webpack 4+版本需要webpack-cli的支持，所以都得安装，之前的版本则不需要

安装vue

npm install vue --save
下面可以选择两种方式安装vue-cli：
如果公司产品运行环境不允许的(即node版本过低),仍然有像打不死的小强(比如我)一样想继续安装的话,可以移步到这里

本地安装vue脚手架

npm install vue-cli --save
重点来了，这里确实已经安装成功了，但因为是本地安装而不是全局的，所以在下面的步骤中会出现问题
至于什么问题接着往下看☟☟☟

全局安装vue脚手架

npm install vue-cli -g
喝杯茶冷静一下~~~
重新创建这个基于webpack的项目：vue init webpack my-project
接下来依次出现了这一堆：

虽然是一路回车加yes下来的，不过我还是去google了一下：

• Project name my-project： —–项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters），阮一峰老师博客为什么文件名要小写 ，可以参考一下。
• Project description A Vue.js project： —-项目描述，也可直接点击回车，使用默认名字
• Author yuanfei： —-作者，输入你的大名
  接下来会让用户选择：
• Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时，已经有推荐了就选择第一个了
• Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
• Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。
  接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，直接y回车
• Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，我选择安装y回车
• Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ，我选择安装y回车

以上引用https://blog.csdn.net/wulala_hei/article/details/80488674
但是ESLint 这个规范我并不建议，如果你的代码缩进是4个空格，那么就会报错和一大堆警告，会很影响心情和开发效率；在这里我选择安装是想让大家看到完整的目录结构

创建一个基于webpack的项目

vue init webpack 你的项目名

如果刚才是用本地安装的vue脚手架，执行完之后发现dos提示：vue不是内部或是外部命令
为了更好的查看我们安装vue的状态，输入vue --version，发现还是没有

个人总结：原因在于本地安装在node_modules里面了，所以在外面调用不到vue，所以就用不了vue的命令，在这个时候我选择了强制安转，在node_modules/.bin/路径下执行了vue init try，安装好了皆大欢喜，结果出现了下面这个情况→_→：

项目确实已经出来了，但是确是在node模块下，这个结构就没法继续下去了…于是我发了帖子得到了大佬的指点，大家有兴趣可以看一下有三种方法解决，我选择了最优质的方案：在目标目录下的package.json中的scripts加一个"vue": "vue"，到了这里想必大家也和我是一个想法，就是安装上了vue只不过访问不到，只需要这样就可以让vue进行访问了，然后正常运行就可以了

运行项目

进入你的项目目录下：cd 你的项目名
运行项目：npm run dev / npm start

打开浏览器输入localhost:8080就出来了

vue-cli构建项目结构

回归项目结构是这样的：

.
|-- build                            // webpack构建目录
|   |-- build.js                     // 生产环境构建的相关代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- utils.js                     // 构建工具相关
|   |-- vue-loader.conf.js           // 生产环境读取vue配置
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置信息
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- node_modules                     // 依赖的node模块包
|-- src                              // 源码目录(我们开发的代码全在这里)
|   |-- components                   // vue组件目录
|   |-- store                        // vuex的状态管理(安装vuex的有该项，用来管理所有组件的状态)
|   |-- router                       // 路由目录(配置整个程序的路由)
|   |-- App.vue                      // 页面入口文件也是我们的主组件(所有页面的切换都是在这下面进行的)
|   |-- main.js                      // 初始化vue实例，程序入口文件(加载各种组件和插件)
|-- static                           // 静态资源目录(图片、字体等)
|-- test                             // 测试文件目录
|-- .babelrc                         // babel的一些配置，即ES6语法编译配置(将ES6语法编译成ES5)
|-- .editorconfig                    // 编辑器的一些配置（包括编码格式，缩进风格，换行格式）
|-- .eslintignore                    // 忽略掉build文件和config文件的语法检查
|-- .eslintrc.js                     // eslint的配置文件(定义了代码风格)
|-- .gitignore                       // 上传到git仓库需要忽略的一些文件格式
|-- .postcssrc.js                    // 通过vue-loader来处理引入的css的输出配置
|-- index.html                       // 入口页面文件
|-- package.json                     // 项目配置文件(项目的一些配置信息)
|-- README.md                        // 项目的相关说明
.

参考：https://www.jianshu.com/p/1155c20725d1

Element UI框架

项目已经运行起来了，下面看一看Element是怎么玩的：

1. 玩一个东西就要先安装它的依赖包npm install element-ui -S
2. 将element引入到vue项目中（样式需单独引入）：

   import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);

接下来引入element的组件，Element官网有提到引入方式有两种，一种是按需引入，另一种是全部引入进来；为了不损害vue轻量框架的标语，最好还是采用按需引入，这样才能达到减小项目体积的目的；这个时候需要借助 babel-plugin-component这个插件来完成按需加载。
首要任务还是安装：npm install babel-plugin-component -D
其次将根目录的.babelrc文件修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

这时我的overlay的作用出来了，给我报了个错：

找不到es2015，这个时候安装个：npm install babel-preset-es2015 -D，然后重新运行代码并打开浏览器就好了

接下来我只引入了这几个就够了：

import { MessageBox, Message, Notification } from 'element-ui';
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

完整组件列表以 components.json 为准

接下来就按照我们以前玩bootstrap的玩法来玩这个就可以了，很简单都是封装好的一些内置的标签和class，拿过来用就行了，项目源码我已经传到了我的GitHub上了，有需要的小伙伴可以自行clone

有的小伙伴包括我都有一个疑问，Element是针对Vue进行开发的，使我们在Vue项目中开发很爽，那能不能在普通html里面使用它呢，答案是肯定的；我带着这些疑问研究了许久，最后我把它上传到了我的素材网上，有需要的小伙伴也可以到这里下载哦

Less

接下来我们使用less在组件中编写css，用了webpack自然就要安装：

npm i less less-loader -D

安装完了很简单了，一步搞定，在你需要的组件中的style里，加上lang="less"就可以了，有需求要给项目或产品换版的小伙伴可以大显身手了

另外这里只讲vue-cli下使用less，所以不是使用的脚手架的朋友请移步这里

好了，到这里我们的项目就完成了：

本文的所有内容均是一字一句敲上去的，希望大家阅读完本文可以有所收获，因为能力有限，掌握的知识也是不够全面，欢迎大家提出来一起分享！谢谢O(∩_∩)O~

欢迎访问我的GitHub，喜欢的可以star，项目随意fork，支持转载但要下标注；
欢迎光临个人主页

等一下( •́ .̫ •̀ )，我还有最后一句话：

我爱你，

又很遗憾没人能证明，

可这份爱已经如鲸向海，

如鸟投林，

无可避免，

退无可退了，

再见…