基于vue+ant design的saas前端

1. 前期准备

确保你本地安装了node，可以在cmd（终端）上输入node -v检查是否安装。

若是没有安装可以在nodejs官网下载

2. 项目准备

使用vscode或者其它编辑器打开项目的根目录

若是在项目的根目录中没有node_modules文件夹，则在项目的根目录中使用指令：

npm install
//或者使用缩写
npm i

image.png

使用上面的指令是为了安装依赖，安装成功之后，项目中会多出一个node_modules文件夹。

image.png

3. 启动项目

还是在项目的根目录中使用指令:

npm run serve

提示成功之后打开地址http://localhost:8000/即可启动项目。

4. 打包项目

npm run build

5. vscode常用插件

vscode中提供了很多插件能帮助我们快速开发，当然并不是必须的。
安装插件的入口在vscode窗口的左边：

image.png

推荐几个常用的插件：

Auto Close Tag    自动闭合HTML标签
Auto Rename Tag   修改HTML标签时，自动修改匹配的标签
HTML CSS Support  css提示（支持vue）
ESLint (eslint语法提示)
Vetur (vue的相关语法提示)
Mithril Emmet （快速生成html标签）

Mithril Emmet需要在settings.json中配置：

"emmet.triggerExpansionOnTab": true,
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    }

教程：https://www.cnblogs.com/summit7ca/p/6944215.html

6. 快速生成vue模板

这部分教程是教你如何新建了一个vue文件之后，快速生成一个vue模板。
首先你得安装如上的插件Mithril Emmet
然后打开vscode左下角中的用户代码片段：

image.png

搜索vue，然后选择第一个Vue，选择了之后会打开一个vue.json文件，再将一下代码全部覆盖文件中的内容。
// vue.json

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div class='$1'>$2</div>",
            "</template>",
            "",
            "<script>",
            "// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
            "// 例如：import 《组件名称》 from '《组件路径》';",
            "export default {",
            "  name: '',",
            "  components: {},",
            "// 生命周期 - 创建完成（可以访问当前this实例）",
            "  created() {",
            "    ",
            "  },",
            "// 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互",
            "  mounted() {},",
            "  data() {",
            "    return {}",
            "  },",
            "// 方法集合",
            "  methods: {},",
            "// 计算属性",
            "  computed: {}",
            "}",
            "</script>",
            "",
            "<style lang='less' scoped>",
            "// @import url($2); 引入公共css类",
            "</style>"
        ],
        "description": "Log output to console"
    }
}

记得保存。
之后你可以在项目随意位置创建一个test.vue文件来测试下效果。
如我在view文件夹下创建了一个test.vue：