搭建 vue-cli 和 引入 Element-ui 最完整的入门例子（手把手）

搭建 vue-cli 脚手架

1. 安装 git

2. 安装 node 并配置环境变量，使用 zip 版本

   # 检查 node 是否安装成功 
   node -v 
   

3. 使用淘宝镜像

   npm config set registry https://registry.npm.taobao.org
   # 检查是否配置成功
   npm config get registry 
   

4. 安装 node 模块 cnpm

   npm install -g cnpm --registry=https://registry.npm.taobao.org
   

5. 全局安装 vue-cli

   cnpm install vue-cli -g
   # 检查是否安装成功
   vue 
   

6. 使用 webpack 骨架初始化应用 ，就像 maven 骨架一样

   mkdir test && cd test
   vue init webpack 
   

   

7. 运行项目

   npm run dev 
   

引入 Element-ui

1. 修改 main.js

   import Vue from 'vue'
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   import App from './App'
   import router from './router'
   
   
   Vue.config.productionTip = false
   
   Vue.use(ElementUI)
   
   
   /* eslint-disable no-new */
   new Vue({
     el: '#app',
     router,
     components: { App },
     template: ''
   })
   
   

   其实只改动了三处

   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   
   Vue.use(ElementUI)
   

   注意事项 ：

   • /* eslint-disable no-new */ 注释不能删除 ，不然报错
   • 最底部必须要有一空行，不然编译不过
   • 缩进空格数必须一致，不然报错

2. 接下来就可以把 vue 官网的组件拿到 HelloWorld.vue 中去玩了，比如我把它弄成了这样

3. 它长成这样子
   

一点小推广

创作不易，希望可以支持下我的开源软件，及我的小工具，欢迎来 gitee 点星，fork ，提 bug 。

Excel 通用导入导出，支持 Excel 公式
博客地址：https://blog.csdn.net/sanri1993/article/details/100601578
gitee：https://gitee.com/sanri/sanri-excel-poi

使用模板代码 ，从数据库生成代码 ，及一些项目中经常可以用到的小工具
博客地址：https://blog.csdn.net/sanri1993/article/details/98664034
gitee：https://gitee.com/sanri/sanri-tools-maven