一、搭建基础环境

1. 正常有两种使用vue的方式

(1)第一种直接在html中引入vue脚本使用(简单的代码书写,本人就不在展示了,有兴趣的看Vue直接引入js
(2)第二种使用webpack进行构建(可以书写复杂的代码,推荐)

2. 使用webpack构建环境准备

(1)本人环境

在这里插入图片描述

(2)按照下列顺序安装

node.js安装教程
npm使用介绍(安装后建议使用国内的淘宝镜像cnpm,当然cnpm有时安装会导致项目离奇的无法运行,现在推荐使用yarn进行一个安装,yarn安装教程
webpack安装教程(版本特别重要,每个版本配置文件差距很大)

二、使用Vue CLI脚手架搭建Vue基础环境

1 . 安装Vue CLI

npm install -g @vue/cli 
//安装完成
//查看安装的版本号
vue --version

在这里插入图片描述

2. 使用 Vue CLI 快速创建一个项目

(1)第一步打开命令行,创建工程

vue create vueTest

在这里插入图片描述

(2)第二步全部选择默认配置(等待安装,知道看到安装成功提示)

在这里插入图片描述

(3)查看目录结构是否完整

在这里插入图片描述

(4)进入vue-test文件下,打开命令行运行程序

//启动服务命令
npm run serve

在这里插入图片描述

(5)按住Ctrl + 左击上图的连接,用默认浏览器打开该网页(安装成功)

在这里插入图片描述

三、Vue常用基础配置

1.配置环境变量

前端的环境变量跟正常系统里的环境变量差不多,都是让当前系统中能简易的获取到对应的信息(文件路径、文件名称等)

(1)环境变量配置规则

在项目根目录(本文根目录vue -test)下,新建环境变量配置文件
文件名规则

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

文件内容(是以key-value形式 出现的键值对)

FOO=bar
VUE_APP_SECRET=secret

(2)环境加载属性

为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。

此外,Vue CLI 启动时已经存在的环境变量拥有最高优先级,并不会被 .env 文件覆写

(3)注意

NODE_ENV
如果在环境中有默认的 NODE_ENV,你应该移除它或在运行 vue-cli-service 命令的时候明确地设置 NODE_ENV。

2. Vue CLI三种模式

(1)默认使用的模式

  1. development 模式用于 vue-cli-service serve
  2. production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
  3. test 模式用于 vue-cli-service test:unit

(2)设置模式

注意:
模式不同于 NODE_ENV,一个模式可以包含多个环境变量。
也就是说,每个模式都会将 NODE_ENV 的值设置为模式的名称——比如在 development 模式下 NODE_ENV 的值会被设置为 “development”。
你可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。
比如,如果你在项目根目录创建一个名为 .env.development 的文件,
那么在这个文件里声明过的变量就只会在 development 模式下被载入。

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。
例如,如果你想要在构建命令中使用开发环境变量,请在你的 package.json 脚本中加入:

"dev-build": "vue-cli-service build --mode development",

3.配置服务器

(1)端口配置

在根目录下新建vue.config.js文件

module.exports = {
  devServer: {
    port: 9000,//配置服务器端口号
  },
};

(2)代理(转发)配置

在根目录下vue.config.js文件添加新配置

module.exports = {
  devServer: {
    port: 9000,
    proxy: {
      "/api": {//地址中以api开头的
        target: "<url>", //转发地址
        ws: true,//代理 websockets
        changeOrigin: true,//允许跨域
        pathRewrite: {//对象/函数,重写目标的url路径。对象键将用作RegExp以匹配路径。
        	'^/old/api' : '/new/api'
        }
      },
      "/foo": {//地址中以foo开头的
        target: "<other_url>",//转发地址
      },
    },
  },
};

详情请参考http-proxy-middleware

(3)其他配置

devServer字段详细配置文档
(注意:
1.有些值像 host、port 和 https 可能会被命令行参数覆写。
2.有些值像 publicPath 和 historyApiFallback 不应该被修改,因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。)

4. 配置webpack

(1)配置生产环境下的压缩资源插件

安装compression-webpack-plugi

npm i -D compression-webpack-plugin 

在根目录下vue.config.js文件添加新配置

//提供带 Content-Encoding 编码的压缩版的资源
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {
  devServer: {
    port: 9000,
    proxy: {
      "/api": {
        //地址中以api开头的
        target: "<url>", //转发地址
        ws: true, //代理 websockets
        changeOrigin: true, //允许跨域
        pathRewrite: {
          //对象/函数,重写目标的url路径。对象键将用作RegExp以匹配路径。
          "^/old/api": "/new/api",
        },
      },
      "/foo": {
        //地址中以foo开头的
        target: "<other_url>", //转发地址
      },
    },
  },
  configureWebpack: () => {
    if (process.env.NODE_ENV === "production") {
      //生产环境时使用
      return {
        plugins: [
          new CompressionPlugin({//提供带 Content-Encoding 编码的压缩版的资源
            test: /\.js$|\.html$|\.css/,
            threshold: 1024,
            deleteOriginalAssets: false,
          }),
        ],
      };
    }
  },
};

这个时候就可以运行 npm run build 构建看dist中是否有压缩的资源
在这里插入图片描述

(2)其他配置

Webpack中Plugin配置文档

四、 使用Antd组件库

1.安装

npm install ant-design-vue --save

2. 引入Vue(两种方式)

(1)全部引入(学习时推荐使用)

注意:全部引入可能会造成很多组件没有用到,却要在构建的时候还要纳入加载文件中,导致包比较大,不利于打包、构建、加载
第一步打开src文件夹下的main.js文件

import Vue from "vue";
import App from "./App.vue";
new Vue({
  render: (h) => h(App),
}).$mount("#app");

第二步引入antd包

import Vue from "vue";
import App from "./App.vue";
//引入Antd组件包
import Antd from "ant-design-vue";
Vue.config.productionTip = false;
new Vue({
  render: (h) => h(App),
}).$mount("#app");

第三步映入antd的css文件

import Vue from "vue";
import App from "./App.vue";
//引入Antd组件包
import Antd from "ant-design-vue";
//引入Antd组件CSS文件
import "ant-design-vue/dist/antd.css";
Vue.config.productionTip = false;
new Vue({
  render: (h) => h(App),
}).$mount("#app");

第四步Vue使用Antd组件

import Vue from "vue";
import App from "./App.vue";
//引入Antd组件库
import Antd from "ant-design-vue";
//引入Antd组件库CSS文件
import "ant-design-vue/dist/antd.css";
//Vue使用Antd组件库
Vue.use(Antd);
Vue.config.productionTip = false;
new Vue({
  render: (h) => h(App),
}).$mount("#app");

(2)按需加载

下面登陆的例子里用到了按钮组件(Button)、表单组件(From)、输入框(Input)、复选框(Checkbox)、图标(Icon)、全局提示(message)

import Vue from "vue";
import App from "./App.vue";
//按需引入Antd组件库
import { Button, Form, Input, Icon, Checkbox, message } from "ant-design-vue";
//引入Antd组件库CSS文件
import "ant-design-vue/dist/antd.css";
Vue.use(Button);
Vue.use(Form);
Vue.use(Input);
Vue.use(Icon);
Vue.use(Checkbox);
//message 是全局提示它的触发是方法调用的,所以直接绑定在Vue的原型上
//这样无论何时用Vue.message都可以弹出全局提示
Vue.prototype.$message = message;
Vue.config.productionTip = false;
new Vue({
  render: (h) => h(App),
  mounted: function() {
    this.$message.info("你好");
  },
}).$mount("#app");

简单测试一下看是否成功
将main.js修改成这样

import Vue from "vue";
import App from "./App.vue";
//按需引入Antd组件库
import { Button, Form, Input, Icon, Checkbox, message } from "ant-design-vue";
//引入Antd组件库CSS文件
import "ant-design-vue/dist/antd.css";
Vue.use(Button);
Vue.use(Form);
Vue.use(Input);
Vue.use(Icon);
Vue.use(Checkbox);
//message 是全局提示它的触发是方法调用的,所以直接绑定在Vue的原型上
//这样无论何时用Vue.message都可以弹出全局提示
Vue.prototype.$message = message;
Vue.config.productionTip = false;
new Vue({
  render: (h) => h(App),
  mounted: function() {
    this.$message.info("你好");
  },
}).$mount("#app");

执行

npm run serve

打开项目地址就会看到消息提示,这表示成功了
在这里插入图片描述

3.写个Login.vue页面小例子(试个手)

(1)创建目录和文件

第一步:在src文件夹下新建pages文件夹
第二步:在pages文件夹下新建Login.vue文件
在这里插入图片描述

(2)编写内容

<template>
  <a-form :form="form" class="login-form" @submit="handleSubmit">
    <a-form-item>
      <a-input
        v-decorator="[
          'username',
          {
            rules: [{ required: true, message: '请输入用户名!' }],
          },
        ]"
        placeholder="用户名"
      >
        <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input
        v-decorator="[
          'password',
          {
            rules: [{ required: true, message: '请输入密码!' }],
          },
        ]"
        type="password"
        placeholder="密码"
      >
        <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-checkbox
        v-decorator="[
          'remember',
          {
            valuePropName: 'checked',
            initialValue: true,
          },
        ]"
      >记住我</a-checkbox>
      <a class="login-form-forgot" href>忘记密码</a>
      <a-button type="primary" html-type="submit" class="login-form-button">登录</a-button>
      <a href="/register">注册</a>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("表单里输入的值: ", values);
          this.$message.info("登陆成功!");
        }
      });
    },
  },
};
</script>
<style>
.login-form {
  max-width: 300px;
  margin: auto !important;
}
.login-form-forgot {
  float: right;
}
.login-form-button {
  width: 100%;
}
</style>

(3)使用Login.vue文件

打开src文件夹下的App.vue文件
将HellowWorld改为Login

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <Login />
  </div>
</template>

<script>
import Login from "./pages/Login";

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

(4)执行测试

npm run serve

Ctr+点击链接进入项目页面
在这里插入图片描述

五、Vue中Axios过滤封装请求(下篇)

六、Vue中mockjs模拟数据(下篇)

七、Vue中Router路由(下篇)

八、Vue中Vuex全局存储(下篇)

Antd+Vue最详细的搭建流程(下篇)
源码下载

Logo

前往低代码交流专区

更多推荐