一、搭建基础环境
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）默认使用的模式
- development 模式用于 vue-cli-service serve
- production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
- 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>",//转发地址
},
},
},
};
（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）其他配置
四、 使用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+点击链接进入项目页面
1752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
