使用vueUI创建新项目

创建

cmd打开命令窗口，输入vue ui

打开vue可视化面板，然后

 

点击创建

 

选择一个路径，点击在此创建

 

输入项目名，点击下一步

 

选择手动配置

 

 

 

选择这四项，下一步

 

选择2.x

 

点击创建

安装依赖

 

安装插件

 

删除多余组件

app.vue文件如下

 

router里面的index.js文件如下：

 

删除views文件夹（里面有两个文件：HomeView和AboutView）

删除components中的HelloWorld.vue文件

创建登录组件

components文件夹下创建文件Login.vue(.vue文件是一个单文件组件)

通过路由渲染到App根组件中

router>index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
​
Vue.use(VueRouter)
​
const routes = [
  { path: '/', redirect: '/login' },//表示只要用户访问了/根路径就自动重定向到login路径，需要在app.view加标签router-view 
  { path: '/login', component: Login }
]
​
const router = new VueRouter({
  routes
})
​
export default router
​

 

router-view 当你的路由path 与访问的地址相符时，会将指定的组件替换该 router-view

 

 

配置完显示以上错误

解决：vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false//加入这句解决
})
​

设置是否在开发环境下每次保存代码时都启用 eslint验证

这里置为false即可

加入以上代码以后需要重新运行一下项目

安装less-loader

 

<style lang"less">使用less语法要下载开发依赖less-loader和less 

使用less语法需要安装这两个依赖

定义global.css文件

/* 全局样式表 */
html,body,#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

在main.js中导入全局样式表

// 导入全局样式表
import './assets/css/global.css'

类似css文件导入同上

使用element UI

plugins>element.js

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
​
Vue.use(Element)//使用vue.use注册为全局可用的组件

创建时选择使用配置文件这一项，就会有上面这个文件

 

同时使用elementui还需下载elementui插件和运行依赖

最重要的是选择2.x版本

此时，使用el-form时未报错

login.vue文件如下：

   <!-- 登录表单区域 -->
            <el-form label-width="80px">
                <el-form-item label="活动名称">
                    <el-input></el-input>
                </el-form-item>
            </el-form>