<h3>1.安装环境node</h3>
<p>首先：先从nodejs.org中下载nodejs，选择对应的下载即可。</p>
<p><img alt="" height="247" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-e541dcb00c1602b6b71483e159e420db.png" width="457"></p>
<p>双击安装，在安装界面一直Next</p>
<p><img alt="" height="71" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-5e6b718d2d238afd5a4ed34e462fcd75.png" width="457"></p>
<p><img alt="" height="352" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-8f300714d909a04adc40d12410aecb59.png" width="448"></p>
<p><img alt="" height="361" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-cef1d73ad1a8827015df0abe0de4d18d.png" width="453"></p>
<p>查看安装的版本号</p>
<p><img alt="" height="126" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-dd7552be49b2d460aa5efeff418c09b0.png" width="365"></p>
<p><strong>使用淘宝NPM</strong><strong> </strong><strong>镜像</strong></p>
<p>大家都知道国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。</p>
<p>$ npm install -g npm --registry=https://registry.npm.taobao.org</p>
<p>这样就可以使用npm 命令来安装模块了：</p>
<h3>2.安装vue的脚手架</h3>
<p>npm install vue-cli -g //全局安装 vue-cli</p>
<p>安装完成查看vue的版本</p>
<p><img alt="" height="81" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-95a261d4dca43a31105451fdd951f639.png" width="287"></p>
<h3>3.创建vue项目</h3>
<p>vue create vue-ant demo(项目名称，任意)</p>
<p><img alt="" height="329" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-0f58f7addbc88de8c0b024151ecc4859.png" width="525"></p>
<h3>4.使用vscode打开项目，先npm install 安装依赖，然后npm run serve启动项目</h3>
<p><img alt="" height="529" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-9c4a42f4072241844eda15bcfd50de04.png" width="590"></p>
<p>最后访问：<a href="http://localhost:8081/">http://localhost:8081/</a> 项目创建成功。</p>
<p><img alt="" height="354" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-3ec9b329b23f7663b80a1deb7845bd23.png" width="597"></p>
<h3>5.引入element-ui，npm i element-ui -S</h3>
<p><img alt="" height="458" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-faf7da5897048d40536d64add9ed15f7.png" width="548"></p>
<h3>6.在main.js中引入element-ui</h3>
<pre class="blockcode"><code>// 引入element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)</code></pre>
<p><img alt="" height="352" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-9172fc2ecd2a945b92cf1155d5135c55.png" width="595"></p>
<h3>7.<a href="https://element.eleme.cn/#/zh-CN/component/table">https://element.eleme.cn/#/zh-CN/component/table</a> 在组件库找到对应的组件即可，这里使用table组件。</h3>
<pre class="blockcode"><code><template>
<div>
<h1>使用element-ui的表格</h1>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: []
}
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
</code></pre>
<h3> |
|
转播
