vue-cli脚手架
作用
vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
安装nodejs并验证
安装nodejs,下一步下一步就可以,可以安装最新的15版本,win7的话可以安装14版本.使用以下dos命令提示符下执行：
node -v # v8.11.3，至少8以上,最新的是v15.11.0
配置npm
Nodejs下的包管理器,Nodejs中包含了npm,无需单独安装.默认去官网下载资源,可以换成国内的镜像
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/
参数说明
注意单词的大小写
-i 安装指令，全拼： install
-S 生产环境，全拼： --save
-D 开发环境，全拼： --save—dev
-O 可选依赖，全拼： --save—optional
-E 精确安装指定模块版本，全称：--save—exact
-g 全局安装，全拼： --global
脚手架安装
vue-cli: 用户生成Vue工程模板（帮你快速构建一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库）
vue-cli: 脚手架工具安装与配置（需要几分钟）
npm install vue-cli -g #安装vue-cli脚手架---可能比较慢,要等几分钟
npm uninstall vue-cli -g #卸载vue-cli脚手架 --- 大可不必
vue –V #查看版本
where vue #vue安装在哪里
创建Vue项目 npm
工作空间
进入工作空间目录：D:\workspace\vue
生成vue项目
基于vue.js的官方webpack模板：(乱码无需理会)
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包
vue init webpack vue01 #此处项目名不能使用大写---可能比较慢,要等
成功显示：
启动项目 & 停止项目
npm run dev # 自动启动服务，ctrl+c 停止,可能要等几分钟HBuilderX管理Vue项目
打开Vue项目
项目结构
安装 element-ui
访问官网: https://element.eleme.cn/#/zh-CN/component/installation,查看组件指南
安装
在工程目录下,使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui –D # 下载资料,这可能要等几分钟
修改 main.js,引入Element
你可以引入整个 Element，或是根据需要仅引入部分组件。
// 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/>'
})
下载axios依赖
npm install --save axios 在需要用的组件中导入
自定义组件
<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>
自定义路由规则
路径遇到就会跳转
修改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>