手把手教你搭建一个Vue项目，包含axios服务，vuex，公共组件/指令/过滤器/服务等

看了网上有很多搭建vue项目的demo，但是不是已经年久失修的项目就是很简单的demo，想着自己也搭了很多vue项目了，而在每个项目中，我都会取长补短的去搭建自己的项目，经验总是一个一个坑走过来的嘛。趁现在有点时间就分享一个vue架子的搭建。其中包含公共组件的封装，axios服务/路由，vuex，自定义指令/过滤器，rem适配，css预处理器，UI库，使用node去编辑项目中的工具。（本教程，适用于对vue基础有一定了解的童鞋）

如果你能一步一个脚印跟着教程去趟坑，就一定能学会。但是我认为，一个人最重要的不是技术而是思维，因为技术你可以看文档去问度娘，但是思维这东东却需要你的脑袋瓜子够灵活并且需要一定的项目经验。我希望，本教程能给你带去的而不仅仅是一点点技术。（如果以下教程有更完美的方案，欢迎留言/期待）

项目地址 gitHub：https://github.com/susuGirl/vue-project

技术：vue-cli vue-router vue axios stylus git lodash

 

npm install vue ：安装vue

npm install —global vue-cli ： 全局安装 vue-cli

vue init webpack vue-project ：创建一个基于 webpack 模板的新项目，项目名 vue-project 可自定义

测试工具暂时不需要，但是ESLint检测代码，你们可以选择要或者不要。我选择留下，并且下面会配置只检测vue文件不检测js文件，否则其他项目的js文件也会受到影响，一片飘红惨不忍睹…...

 

出现以下结果，代表项目新建完成。

cd vue-project 打开项目

npm install 安装依赖

npm run dev 运行项目

 

 

然后可以打开你的编辑器，下载ESLint插件

vscode配置：首选项/设置/配置

{

"editor.tabSize": 2,

"prettier.tabWidth": 2, // 设置Tab缩进距离

"eslint.enable": true,

"eslint.autoFixOnSave": true, // 保存时自动格式化

"eslint.run": "onType",

"eslint.options": {

    "extensions": [".vue"] // 只检测vue结尾的文件，不添加js文件，避免其他项目的js文件也收影响一片飘红

},

"eslint.validate": [

    { "language": "vue", "autoFix": true }

]

}