一、搭建基础环境

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最详细的搭建流程（下篇）
源码下载

# vue.js # node.js # javascript # es6
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue