持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
因为公司目前还有需要兼容ie浏览器的，所以暂且记录一下快速搭建的步骤
1. 如果第一次搭建可能需要全局安装一下@vue/cli-init
npm i -g @vue/cli-init
如果没有安装直接执行下面第二步，那也没关系，它会提醒你执行第一步，如下图所示
2. 命令行快速创建vue项目，这里vue2-front为你所想创建的项目名
vue init webpack vue2-front
3. 安装element-ui框架，引入ui框架，这里主要是想将整个项目快速创建并且能够兼容ie，所以暂时先完整引入，但是之后还是建议按需引入,详细可以参考官网
执行命令 npm i element-ui -S
npm i element-ui -S
在 main.js 中写入以下内容：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
4. 启动项目，执行命令 npm run dev,在浏览器成功访问地址，到这里为止，已经快速创建完vue2项目了
5. 首先我们可以先看一下就目前为止的vue2+element项目能兼容到ie哪个版本。（这里能在ie9上显示，所以就暂时不用添加babel-polyfill） 创建并且启动成功项目，我们能知道，我们页面看到的其实是HelloWorld的内容【这里就直接用创建项目原本有的路由等内容先，主要是检测ie，后续再根据项目自主调整】
那么我直接从elementui那里复制form表单中的实例到HelloWorld
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
这里在ie浏览器浏览能够兼容到ie9
根据官网所说，vue2是不兼容ie8的
6.如果不能兼容到ie9，那么添加babel-polyfill
(1) 安装babel-polyfill插件
npm install --save-dev babel-polyfill
(2) main.js 顶部引入 babel-polyfill
import "babel-polyfill";
(3) 在 webpack.base.conf.js 修改entry
entry: {
app:['babel-polyfill','./src/main.js']
},
(4) 重新启动项目即可
总结：主要还是记录一下创建vue2项目基本的命令，方便日后需要的时候直接使用，后续按需引入插件即可，例如less,axios等其他插件，因为在公司PC端的UI框架有接触过iview和element这两个框架爱，相较而言，个人感觉如果要考虑ie，可能element会更好一些，所以这里我是用elementui作为ui框架来做例子
