vue从零开始搭建项目

命令创建法(使用cmd命令面板更好，选预设选项的时候有颜色提示，而git bash没有):

1.全局安装vue-cli：npm install -g @vue/cli; 安装成功后 vue --version 查看其版本（@vue-cli 4.2.0）；
2.转换到你想要的文件夹目录下cd f:
3.创建项目：vue create project-name;
4.创建项目成功后cd project-name -> npm run serve 运行；

image.png

图形化创建法：

上面第一步完成后，在cmd命令面板中cd到你想创建项目的文件夹下，输入 vue ui出现图形化创建项目的引导图，然后按需选择。

创建项目成功后的界面

image.png

目录划分

视图页面放在 pags或者views中
静态文件放在static中
资源文件放在assets中
样式文件放在styles中
辅助库放在utils中
配置文件可以放在config或者constants中
vuex的文件放在stores中，至于getters, actions, mutation, modules可以参考vuex的文档
路由文件放在routes中
所有组件放在components中
共享代码也可以使用shared作为目录
布局组件可以放在layouts目录中

引入全局scss样式

安装scss：npm install -D sass-loader node-sass (-D是--save-dev的简写)
或者分开写 npm install sass-loader --save-dev;
在与src平级的目录下新建vue.config.js文件，这个文件是可选的配置文件，当目录下有该文件时会自动被@vue/cli-service加载
更多的其他配置项见https://cli.vuejs.org/zh/config/#vue-config-js

image.png

引入element-ui

方法一： cmd定位至项目目录下,执行命令 vue add element，选择全部引入或按需引入，然后重新启动项目，就可以看到效果了；
方法二： cmd定位至项目目录下,执行命令 vue ui，在图形化界面的插件页 -> 点击右上角添加插件 -> 搜索vue-cli-plugin-element加入；

引入iconfont图标

本地引入,将图标库中的字体文件下载至本地，放入项目的asset文件下，然后在main.js中import font.scss文件；
这里也遇到一个坑，本来是将所有的公共scss文件都导入到main.scss中，然后在vue.config.js里面引入main.scss，结果就font文件没有被编译，其他样式文件都生效了

image.png

坑一：font.scss中引用静态字体文件的路径问题：开始用注释中的方式引入文件，结果一直报错说找不到文件，查找资料后解决；
参见：https://segmentfault.com/a/1190000016120011?utm_source=tag-newest

image.png

封装http请求

1.使用axios，安装：npm install axios --save

2.新建axios.js文件

总结：刚开始一定要把经常用的命令行记住，多敲几遍，形成肌肉记忆（仅写给自己）