Vue2 学习记录

一、创建项目

1、vscode打开目录:D:\vueCode\test\hi

2、vue create hi01

3、选手手动配置( Manually select features)

4、按空格选中

5、回车,选择 Vue2

6、 Use history mode for router? no

7、 Pick a CSS pre-processor: less

完成项目创建

二、测试创建的项目

1、cd hi01

2、npm run serve

稍侯,一段时间后出现: http://localhost:8080/,看见vue经典界面表示项目创建成功。

三、element-ui 测试

1、进入官网地址:组件 | Element

2、npm i element-ui -S

3、main.js 引入:

......

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

......

main.js详细代码如下所示。

javascript 复制代码
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4、App.vue 引入

App.vue加入element测试组件(我这里使用button)

......

<el-row>

<el-button icon="el-icon-search" circle></el-button>

......

</el-row>

......

App.vue代码如下所示。

html 复制代码
<template>
  <div id="app">
<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

5、测试

1、npm run serve

2、http://localhost:8080, 看见按钮

相关推荐
hello kitty w13 分钟前
Python学习(11) ----- Python的泛型
windows·python·学习
讽刺人生Yan20 分钟前
RFSOC学习记录(五)带通采样定理
学习·fpga·rfsoc
报错小能手1 小时前
linux学习笔记(49)Redis详解(1)
linux·笔记·学习
QT 小鲜肉1 小时前
【个人成长笔记】在本地Windows系统中如何正确使用adb pull命令,把Linux系统中的文件或文件夹复制到本地中(亲测有效)
linux·windows·笔记·学习·adb
_李小白3 小时前
【OPENGL ES 3.0 学习笔记】第九天:缓存、顶点和顶点数组
笔记·学习·elasticsearch
洛白白4 小时前
Word文档中打勾和打叉的三种方法
经验分享·学习·word·生活·学习方法
楼田莉子6 小时前
C++学习:C++11关于类型的处理
开发语言·c++·后端·学习
酷讯网络_2408701606 小时前
PHP双轨直销企业会员管理系统/购物直推系统/支持人脉网络分销系统源码
学习·开源
xwz小王子7 小时前
面向机器人学习的低成本、高效且拟人化手部的设计与制作
人工智能·学习·机器人
半夏知半秋7 小时前
游戏登录方案中常见的设计模式整理
服务器·开发语言·笔记·学习·游戏·设计模式·lua