【前端----Vue】Element UI框架搭建

1.webpack 全局安装

npm install -g webpack

2.淘宝镜像cnpm安装

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

3.vue脚手架全局安装 -- 用于生成vue模板

npm install -g vue-cli

4.使用脚手架构建vue项目 -- 一路回车就行了

vue init webpack

如果提示vue不是内部或外部命令说明没有配置环境变量，找到vue.cmd所在目录，加到环境变量path里

目前可用的模板：

browserify：全功能的Browserify + vueify，包括热加载，静态检测，单元测试。

browserify-simple：一个简易的Browserify + vueify，以便于快速开始。

webpack：全功能的Webpack + vueify，包括热加载，静态检测，单元测试。

webpack-simple：一个简易的Webpack + vueify，以便于快速开始。

5.element-ui安装

npm i element-ui

6.依赖安装，这里用cnpm安装，因为依赖太多耗时很长，最后会在项目中生成一个node_modules文件

cnpm install

7.大功告成，这里可以运行了

npm run dev

 

vue项目的构建到现在就算完成了，那么现在就引入element-ui组件模块，这里以radio组件为例

1.在\element-ui\src\components\新建个vue组件，组件名为radio

radio组件代码 

<template>
    <el-radio-group v-model="value">
        <el-radio :label="1">选项1</el-radio>
        <el-radio :label="2">选项2</el-radio>
        <el-radio :label="3">选项3</el-radio>
    </el-radio-group>
</template>

<script>
    export default {
        data() {
            return {
                value: 3
            };
        }
    }
</script>

2.在element-ui\src\router.js中设置路由

import radio from '@/components/radio' //引入刚创建的组件
//设置路由
{
      path: '/radio',
      name: 'radio',
      component: radio
}

如图

 

3.在\element-ui\src\main.js中加入element-ui的js和css

import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css

Vue.use(ElementUI) //使用elementUI

如图

 

4.大功告成，运行后的效果就是这个样子

 

最后，项目初始时，默认安装ESLint（ESLint是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码）的原因，关闭ESLint方法： 将下图中的代码注释掉重启即可