准备开始
1. 安装node (node -v查询版本号) (下载地址:https://nodejs.org/en/download/)
2. 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org
3. 安装 webpack,以全局的方式安装
npm install webpack -g
4.全局安装vue以及脚手架vue-cli
npm install @vue/cli -g --unsafe-perm
5.创建vue项目
vue create 项目名称
项目前置配置
- 选择预设模板:Manually select features:手动配置
- 选择需要使用的特性:Babel,Router,Vuex,CSS Pre-processors,Linter / Formatter(单元、E2E测试不选,ts根据项目情况选)
- Router 选择路由模式:选用history(URL 中不带有 # 符号,但需要后台配置支持)
- 选择 CSS Pre-processors:Sass(因为element使用Sass)
- 选择 Linter / Formatter(Pick a linter / formatter config: (Use arrow keys):这里我试着选了ESLint + Prettier,通常选择ESLint + Standard config
- 选择在什么时间进行检测(Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)):
- Lint on save:保存时检测(√)
- Lint and fix on commit:提交时检测
- 选择在什么位置保存配置文件(Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)):In dedicated config files
- 选择是否保存本次配置以便于下次使用(Save this as a preset for future projects? (y/N)):N
配置好后,会自动生成一个项目,根据终端的提示,cd进入项目后,执行npm run serve,本地环境的运行命令可以自己配
导入element
官方文档:https://element.eleme.cn/#/zh-CN/component/installation
全局导入命令:npm i element-ui -S
在main.js中引入:
import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; import 'element-ui/lib/theme-chalk/index.css' import ElementUI from 'element-ui' Vue.use(ElementUI) Vue.config.productionTip = false; new Vue({ router, store, render: (h) => h(App), }).$mount("#app");
创建路由 (router/index.js)
import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); import LoginView from "../views/LoginView.vue"; /** * 处理控制台的报错 * Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home/list". * 添加以下代码 */ const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch((err) => err); }; export const constantRoutes = [ // 重定向 { path: "/", redirect: "/login", }, //login { path: "/login", component: LoginView, }, ]; const createRouter = () => new VueRouter({ mode: "history", base: process.env.BASE_URL, scrollBehavior: () => ({ y: 0, }), routes: constantRoutes, }); const router = createRouter(); export default router; // import Vue from "vue"; // import VueRouter from "vue-router"; // import HomeView from "../views/HomeView.vue"; // Vue.use(VueRouter); // const routes = [ // { // path: "/", // name: "home", // component: HomeView, // }, // { // path: "/about", // name: "about", // // route level code-splitting // // this generates a separate chunk (about.[hash].js) for this route // // which is lazy-loaded when the route is visited. // component: () => // import(/* webpackChunkName: "about" */ "../views/AboutView.vue"), // }, // ]; // const router = new VueRouter({ // mode: "history", // base: process.env.BASE_URL, // routes, // }); // export default router;
引入axios
官网::http://www.axios-js.com/ (基于Promise的HTTP客户端,用于发送HTTP请求)
安装:npm install axios -S
创建一个名为utils的文件夹,在其中创建一个名为request.js的文件:
import axios from 'axios' const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 }) service.interceptors.request.use( config => { // 在请求发送之前做些什么 return config }, error => { // 对请求错误做些什么 console.log(error) return Promise.reject(error) } ) service.interceptors.response.use( response => { // 对响应数据做些什么 return response.data }, error => { // 对响应错误做些什么 console.log(error) return Promise.reject(error) } ) export default service
最后src/main.js文件的内容为:
import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; import "element-ui/lib/theme-chalk/index.css"; import ElementUI from "element-ui"; import request from "./utils/request"; Vue.use(ElementUI); Vue.config.productionTip = false; Vue.prototype.$http = request; new Vue({ router, store, render: (h) => h(App), }).$mount("#app");
在views文件夹下创建LoginView.vue:
<template> <div class="sign-in"> <el-row> <el-col :span="12" :offset="6"> <h1>后台系统</h1> <el-form :model="loginForm" :rules="loginRules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-form-item label="手机号:" prop="user_phone"> <el-input v-model="loginForm.user_phone"></el-input> </el-form-item> <el-form-item label="密码:" prop="sort"> <el-input v-model="loginForm.password" type="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="handleLogin('ruleForm')"> 立即登录 </el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> </el-col> </el-row> </div> </template> <script> // import { setBasicInfo } from "@/utils/auth"; // import { Login, signIn } from "../../api/login/login"; // import store from "@/store"; export default { data() { return { loginForm: { user_phone: "admin", password: "123123", }, loginRules: { name: [{ required: true, message: "请输入手机号", trigger: "blur" }], password: [{ required: true, message: "请输入密码", trigger: "blur" }], }, }; }, methods: { async handleLogin(formName) { this.$refs[formName].validate(async (valid) => { if (valid) { this.$message.error("错了哦!系统错误!"); // const res = await Login(); // if (!res.success) return this.$message.error("错了哦!系统错误!"); // const data = res.data; // if ( // this.loginForm.user_phone === data.user_phone && // this.loginForm.password === data.password // ) { // // const res2 = await signIn(); // const menu = await setBasicInfo(); // await store.dispatch("apply/getApply"); // const redirect = menu[0].path + "/" + menu[0].children[0].path; // await this.$router.push(redirect); // } else { // this.$message.error("错了哦!账号密码不正确!"); // } } }); }, resetForm(formName) { this.$refs[formName].resetFields(); }, }, }; </script> <style scoped lang="scss"> .sign-in { padding-top: 100px; } h1 { text-align: center; } </style>
运行效果:
标签:vue,const,Vue,element,从零开始,vue2,router,import From: https://www.cnblogs.com/nangras/p/17689903.html