一、创建项目
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, 看见按钮