【vue】9.2 vue2.0搭建脚手架项目

进入项目工作空间 ，准备新建脚手架项目。

F:
cd workspace
cd vue_workspace/le_lang_campus_management_system_workspace

image.png

新建vue脚手架项目。

vue create le_lang_campus_management_system

按键盘方向键，确定按回车，选第三个，自定义。

image.png

下面的内容按空格则选中。

image.png

这里不使用TypeScript，vue对其支持不是很完善。其他的全部勾选。
Babel: es6转es5

TypeScript:支持ts
Progressive Web App (PWA) Support:渐进式web应用
Router:路由
Vuex:管理状态
CSS Pre-processors：CSS预处理
Linter / Formatter：代码规范
Unit Testing：单元测试
E2E Testing：端到端测试

image.png

选完之后直接按回车键。

image.png

这里我们选择vue2.x版本进行开发。

image.png

问我们的路由是否使用history模式，我们希望有一个漂亮的URL，所以使用该模式，输入 Y，回车。

image.png

接下来问我们的css预处理器使用什么。这里我们使用sass/scss(with node-sass)<图片表示错误！>。

image.png

lint使用ESLint +Standard config 正常控制<图片表示错误！>。

image.png

询问lint的时机，保存的时候还是代码提交的时候，这里我们全选。

image.png

image.png

选择测试的方案，选择哪个测试运行器，这里我们选择Jest。

image.png

端到端测试，用来模拟用户操作。这里我们选择Nightwatch。

image.png

运行在哪个浏览器上，这里我们全选。

image.png

所有的配置文件，我们希望放到一个单独的文件里，而不是所有的都融到package.json中。选择 In dedicated config files

image.png

这里询问是不是把此次配置起个名字保存起来，下次再新建项目时就可以直接使用了。

image.png

下面开始生成依赖，安装项目，等待即可。

image.png

出现如下界面表示安装完成。

image.png

进入项目文件夹内。

cd le_lang_campus_management_system

下面安装Ant Design Pro组件库和moment时间库

cnpm install ant-design-vue moment

image.png

安装完毕。

用VS code打开项目，并在终端启动项目。

image.png

出现如下界面，没有问题。

image.png

image.png

将App.vue和Home.vue清空：
App.vue:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>

<style lang="less">

</style>

Home.vue:

<template>
  <div class="home">
  </div>
</template>

<script>

export default {
  name: "Home",
  components: {
  },
};
</script>

然后在入口文件中引入组件。
修改main.js:

import Vue from "vue";
import Antd from "ant-design-vue"
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

Vue.use(Antd); //所有的组件都全局注册

new Vue({
    router,
    store,
    render: (h) => h(App),
}).$mount("#app");

image.png

接下来可以直接写编程代码。
修改App.vue

<template>
  <div id="app">
    <a-button>按钮</a-button>
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>

<style lang="less">

</style>

出现一个按钮。(没有样式)

image.png

下面引入样式：
修改main.js

import Vue from "vue";
import Antd from "ant-design-vue"
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import 'ant-design-vue/dist/antd.css';


Vue.config.productionTip = false;

Vue.use(Antd); //所有的组件都全局注册

new Vue({
    router,
    store,
    render: (h) => h(App),
}).$mount("#app");

image.png

然后将引入的样式改为less。报错：

image.png

提示我们可以去 https://github.com/ant-design/ant-motion/issues/44找寻答案。最终找到的方法是：

image.png

进入官网：https://cli.vuejs.org/zh/config/

image.png

新建一个vue.config.js文件在根目录之下。

image.png

找到css样式相关的配置

image.png

image.png

module.exports = {
    // 选项 https://cli.vuejs.org/zh/config/#css-loaderoptions
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true
            },
        }
    }
}

如上配置即可。

引入ant体系全部很大的话，可以加载需要的单个组件。

//或者引入单个控件
// import Button from "ant-design-vue/lib/button"
// import "ant-design-vue/lib/button/style"

这样加载是很麻烦的。
官网提供了一种简约方式：https://www.antdv.com/docs/vue/introduce-cn/#%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD

修改babel.config.js

module.exports = {
    presets: ["@vue/cli-plugin-babel/preset"],
    "plugins": [
        ["import", {
            "libraryName": "ant-design-vue",
            "libraryDirectory": "es",
            "style": true
        }] // `style: true` 会加载 less 文件
    ]
};

再次启动会报错：

image.png

需要我们安装 babel-plugin-import:
安装在dev下：

npm i -save-dev babel-plugin-import

image.png

重新执行安装命令

npm install --no-optional