使用vue+element构建项目

1.确保已经安装过node，vue-cli等，如果还没安装则先安装

安装nodejs可以上官网下载：下载 | Node.js 中文网

npm、yarn、cnpm大家自行安装好。然后开始安装vue可以用命令：cnpm install -g @vue/cli

安装完成后可输入：vue -V 查看版本号

创建项目使用：vue create 项目名称

如：vue create vue-demo 回车后选择vue2

如果想要看vue3项目的小伙伴后面我会再发一篇vue3+vite构建项目的文章，可以先看我发的另一篇文章讲vue3+vite的传值

vue3+vite+TypeScript 传值解析_It`s Stacey的博客-CSDN博客

2.引入element UI

项目创建完成后，安装element UI : npm i element-ui -S

如果使用cdn的方式则要引入：

如果不是用cdn，

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

如果element ui要设按按需引入的话要安装babel-plugin-component

npm install babel-plugin-component -D

然后，新建.babelrc 文件并且加以下配置：（这个配置也可以放在babel.config.js文件中）

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，然后在 main.js 中改成以下内容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

如此页面中就可以写element ui的组件了

3.配置路由

先安装vue-router ：

npm install vue-router@3.2.0

然后配置在main.js中配置：

import Vue from 'vue'
import App from './App.vue'
import { Button } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import router from './router'
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 }
Vue.use(Button)
Vue.config.productionTip = false
 
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

在src下新建router文件夹新建index.js文件并配置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
	{ path: '/', name: 'Home', component: () => import('../views/Home.vue') },
	{ path: '/user', name: 'User', component: () => import('../views/User.vue') },
]

const router = new VueRouter({
	mode: 'history',
	routes,
})
export default router

在app.vue文件中加入路由出口：

此时这个跳转按钮点击后就能跳转到user页面了。

4.配置less

首先安装less和less-loader:   yarn add less

                                              yarn add less-loader

安装完成后但是页面出现报错：

采用vue cli 4x 脚手架开发vue2 项目时  如果安装的less-loader 版本太高会导致这个问题，我这边安装的是10.2.0，因此把less-loader卸载重新安装低版本的：yarn add less-loader@5.0.0

重新安装后报错解决了页面可以正常显示了。