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详细代码如下所示。

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 = falsenew 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代码如下所示。

<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, 看见按钮