vue-cli scaffolding
effect
Vue scaffolding refers to vue-cli, which is a quick and complicated scaffolding for single-page applications. It can easily create new applications and can be used to automatically generate project templates for vue and webpack.
Install nodejs and verify
Install nodejs, the next step is the next step, you can install the latest version 15, if you are win7, you can install version 14. Use the following dos command prompt to execute:
node -v # v8.11.3，至少8以上,最新的是v15.11.0
configure npm
The package manager under Nodejs, Nodejs contains npm, no need to install it separately. By default, go to the official website to download resources, and you can replace it with a domestic mirror
npm config get registry # 查看当前配置的镜像，结果是默认的国外网址https://registry.npmjs.org/
npm config set registry https://registry.npm.taobao.org #设置成淘宝镜像
npm config get registry #再获取查看,结果是修改后的https://registry.npm.taobao.org/
Parameter Description
Pay attention to the capitalization of words
-i 安装指令，全拼： install
-S 生产环境，全拼： --save
-D 开发环境，全拼： --save—dev
-O 可选依赖，全拼： --save—optional
-E 精确安装指定模块版本，全称：--save—exact
-g 全局安装，全拼： --global
scaffolding installation
vue-cli: User-generated Vue project template (to help you quickly build a Vue project, that is, to give you a set of Vue structure, including basic dependency libraries) vue-cli: Scaffolding tool installation and configuration (takes a few minutes
)
npm install vue-cli -g #安装vue-cli脚手架---可能比较慢,要等几分钟
npm uninstall vue-cli -g #卸载vue-cli脚手架 --- 大可不必
vue –V #查看版本
where vue #vue安装在哪里
Create Vue project npm
Workspace
Enter the workspace directory: D:\workspace\vue
Generate vue project
The official webpack template based on vue.js: (don't care about garbled characters)
webpack: Its main purpose is to prepare all static resources that need to be released on the browser side through CommonJS syntax, such as merging and packaging resources
vue init webpack vue01 #此处项目名不能使用大写---可能比较慢,要等
Successful display:
Start Project & Stop Project
npm run dev # 自动启动服务，ctrl+c 停止,可能要等几分钟HBuilderX manages Vue projects
Open the Vue project
project structure
Install element-ui
Visit the official website: https://element.eleme.cn/#/zh-CN/component/installation, view the component guide
Install
In the project directory, use npm to install it, which can be used better with the webpack packaging tool.
npm i element-ui –D # 下载资料,这可能要等几分钟
Modify main.js and introduce Element
You can import the entire Element, or only some components as needed.
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
import ElementUI from 'element-ui'; //导入element
import 'element-ui/lib/theme-chalk/index.css';//导入element的css
//以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
Vue.use(ElementUI);//使用element
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Download axios dependencies
npm install --save axios Import in required components
custom components
<template>
<div class="login_container">
<div class="login_box">
</div>
<div class="png_box" >
<!-- 头像 -->
<img src='../assets/eeb74918800e41ee4a5fb39d7a8d6bd.jpg' alt="" width="100px" height="100px" border="3" >
<!-- 登录表单 -->
<el-form ref="formref" :rules="rules" :model="form" label-width="50px" class="login_form">
<!-- 账号 -->
<el-form-item prop="phone">
<el-input v-model="form.phone" placeholder="请输入账号"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item prop="password">
<el-input v-model="form.password" placeholder="请输入密码" show-password></el-input>
</el-form-item>
<el-form-item class="btns">
<el-button type="primary" @click="onSubmit">登录</el-button>
<el-button type="info" @click="resetLgonFrom">取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
form: {
phone: '13688888888',
password: 'qqq',
},
// 验证规则
rules: {
phone: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 5, max: 13, message: '长度在 5 到 13 个字符', trigger: 'blur' }
],
password:[
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 3, max: 18, message: '长度在 3到 18个字符', trigger: 'blur' }
]
}
}
},
methods: {
onSubmit() {
// 登录按钮
console.log(this.form.phone);
axios.post('http://hostlocal:8081/wnapp/app/login',this.form) .then(
response=>{//successcallback
console.log(response.data);
})
},
resetLgonFrom(){
// 取消按钮
// console.log(this);
this.$refs.formref.resetFields();
}
}
}
</script>
<style >
.login_container{
background-color: #409EFF;
height: 100%;
}
.login_box{
background-color: #C0C4CC;
height: 300px;
width: 300px;
border-radius: 10px;
position: absolute;
left: 40%;
top: 40%;
}
.png_box{
height: 350px;
width: 300px;
position: absolute;
left: 40%;
top: 35%;
border-radius: 20px;
}
.login_form{
position: absolute;
bottom: 5px;
}
</style>
custom routing rules
When the path is encountered, it will jump
Modify App.vue
<template>
<div id="app">
<!-- 使用路由规则-->
<router-link to="/login">login</router-link>
<router-link to="/t2">t2</router-link>
<router-view></router-view>
</div>
</template>
<script>
import Car from './components/Car.vue'
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>