51·[Vue项目]旺财记账-项目搭建

• 环境准备

• 使用vue/cli创建项目
• 目录结构介绍
• 编辑器优化

-曾老湿, 江湖人称曾老大。

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

环境准备

使用vue/cli创建项目



如果创建成功，如下图：





目录结构介绍



编辑器优化

原来，我们如果想要创建一个Vue文件，需要鼠标右键然后New，创建vue文件，然后在文件中添加如下内容。

修改默认的template







说白了，就特么的是用@符号来import，配置@代表src目录

src/assets/styles/test.scss

使用App.vue引入



让webstrom知道@这个符号



然后App.vue中测试使用~@引入css