在以下创建vue项目之前，前提准备是nodeJS以及npm，多留意本地安装的node版本以及npm版本，因为有些操作在不同版本的兼容性并不相同，可以留意package.json文件中各个依赖的版本
-
Vue脚手架安装
npm install -g @vue/cli # 以上这个命令有可能会报错，试着清除缓存，然后重新安装 清除缓存：npm cache clean --force 建议使用淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.prg
-
cd进入项目文件夹，使用cli命令创建项目
vue create xxx
-
运行项目
npm run serve
-
安装vue-router
vue add router
-
安装elementUI
vue add element # 以上安装有可能会失败，导致nmp run serve失败，请尝试删除node-modules文件夹，重新使用npm install或者cnpm install命令生成依赖
<!-- Login.vue -->
<template>
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="用户名:" prop="username">
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码:" prop="pwd">
<el-input v-model="form.pwd" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="sub()">登录</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: "Login",
data() {
return {
form: {
username: '',
pwd: ''
},
rules: {
username: [{
required: true,
message: '请输入用户名',
trigger: 'blur'
}],
pwd: [{
required: true,
message: '请输入密码',
trigger: 'change'
}]
}
}
},
methods: {
sub() {
console.log(this.form)
}
}
}
</script>
<!--router index.js-->
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Login from '../views/Login.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
{
path: '/login',
name: 'login',
component: Login
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
<!--App.vue-->
<template>
<div id="app">
<a href="login">Login</a> |
<a href="about">About</a>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
components: {
}
}
</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>
