命令创建法(使用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 运行;
图形化创建法:
上面第一步完成后,在cmd命令面板中cd到你想创建项目的文件夹下,输入 vue ui出现图形化创建项目的引导图,然后按需选择。
创建项目成功后的界面
目录划分
视图页面放在 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
引入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文件没有被编译,其他样式文件都生效了
坑一:font.scss中引用静态字体文件的路径问题:开始用注释中的方式引入文件,结果一直报错说找不到文件,查找资料后解决;
参见:https://segmentfault.com/a/1190000016120011?utm_source=tag-newest
封装http请求
1.使用axios,安装:npm install axios --save
2.新建axios.js文件