VUE初始化你想要的项目(Webpack+AXIOS+router+eslint,线上帮助无助的你,知道项目完全成功为止)
对于新手小白来说,对于一个复杂的工程,各种复杂的文件结构,摸不着头绪,在这里,我用最简单的,最少的语句,希望经过这篇文章,朋友们可以永远地翻过这个坎,完全掌握初始化
一 ,具体步骤
1.建立一个你用来放项目的文件夹
2.用terminal(命令行)进入到该文件夹下面
3. 安装vue-cli(可以理解为后续用来帮我们一条龙安装的工具) npm install --global vue-cli
4. 初始化带有webpack的项目结构(webpack) vue init webpack xx(xx处换成你想要的项目名字)
5. cd XX
6. npm install(自动地帮你安装所有需要的配置和依赖)
7. npm install --save axios 安装AXIOS
8. npm run dev
9. 完了之后不要忘了,在main.js文件里面加以下红色圈出相关语句,就可以使用axios啦
二 ,各个文件解释
├── build // webpack的基本配置、开发环境配置、生产环境配置
├── config // 路径、端口以及反向代理配置
├── dist // webpack打包后的静态资源
├── node_modules // npm安装的依赖包
├── src // 前端主文件
│ ├── assets // 静态资源
│ │ ├── font
│ │ ├── img
│ │ └── scss
│ ├── components // 单个组件
│ │ ├── xxx.vue // 单文件组件
│ ├── router // 路由配置
│ ├── store // 全局变量
│ ├── App.vue // App组件
│ ├── main.js 主入口文件
├── static // 静态文件
├── .babelrc // babel的配置项
├── .editorconfig // 编辑器的配置项
├── .gitignore // 会忽略语法检查的目录
├── index.html // 入口页面
├── package.json // 项目的描述和依赖
复制代码