☞☞ 个人主页欢迎访问 ☜☜
友情链接: 想要学习最简单最基础的Vue+Webpack等更多配置, 可以Fork该项目, 遇到问题可以直接new issue
大家好，我是苏日俪格，这篇文章可能会有一些遗漏的地方，当初写完没有保存，结果好多后来写的都没存上重新又写的，有问题的地方望读者告知，谢谢！
看到文章名字就大致清楚，本文是在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：
本地安装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是怎么玩的：
- 玩一个东西就要先安装它的依赖包
npm install element-ui -S - 将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，所以不是使用的脚手架的朋友请移步这里
好了，到这里我们的项目就完成了：
该项目已经上传到个人的GitHub上，预览：https://yufy1314.github.io/vue-cli-demo/
本文的所有内容均是一字一句敲上去的，希望大家阅读完本文可以有所收获，因为能力有限，掌握的知识也是不够全面，欢迎大家提出来一起分享！谢谢O(∩_∩)O~
欢迎访问我的GitHub，喜欢的可以star，项目随意fork，支持转载但要下标注；
欢迎光临个人主页
等一下( •́ .̫ •̀ )，我还有最后一句话：
我爱你，
又很遗憾没人能证明，
可这份爱已经如鲸向海，
如鸟投林，
无可避免，
退无可退了，
再见...
