捋捋
捋捋

HBuilderX创建Vue的elementUI项目

1.打开HBuilder新建一个项目
HBuilderX创建Vue的elementUI项目_第1张图片
HBuilderX创建Vue的elementUI项目_第2张图片
2.在package.json文件下的dependencies下加入router的相关配置（“vue-router”: “^3.5.3”），如下示例：

{
  "name": "default",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "element-ui": "^2.15.6",
    "vue": "^2.6.10",
    "vue-router": "^3.5.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "vue-template-compiler": "^2.6.10"
  }
}

3.打开这个项目的终端，运行npm install，这样vue的router就加载进来了
HBuilderX创建Vue的elementUI项目_第3张图片
如果报错了，如下图
HBuilderX创建Vue的elementUI项目_第4张图片设置成国外镜像，输入命令：

 npm config set registry http://registry.npmjs.org

重新运行npm install

4.添加elementUI：在本终端执行：npm i element-ui -S，完成后可以在项目下的node_modules里面找到elementui文件夹，同时在mian.js文件中导入下面五局代码：
HBuilderX创建Vue的elementUI项目_第5张图片

/* 使用elementUI组件 */
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
/* 引入路由，才能使用，记得在下面的new Vue里注册这个路由 */
import router from './routers.js'
 
/* 让vue使用elementUI */
Vue.use(ElementUI);
/* 让vue使用router */
Vue.use(router);
  1. 在components文件夹下创建一个组件，记得首字母大写
    HBuilderX创建Vue的elementUI项目_第6张图片Selection.vue文件代码