vue2.0 + element-ui 实战项目- 搭建环境(一）

悠悠 2022-11-21 01:09 225阅读 0赞

vue2.0官方网站：[http://caibaojian.com/vue/guide/installation.html][http_caibaojian.com_vue_guide_installation.html]  
element-ui官方网站：[https://element.eleme.cn/\#/zh-CN][https_element.eleme.cn_zh-CN]

--------------------

vue项目中引入饿了么elementUI组件  
[https://www.jianshu.com/p/094eccb84267][https_www.jianshu.com_p_094eccb84267]

### 1：安装node ###

端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载[https://nodejs.org/en/][https_nodejs.org_en]，安装完成之后，打开cmd开始输入命令。（我用的是win10系统，所以需要管理员权限，右键点击以管理员身份运行cmd），不然会出现很多报错。

![format_png][]

### 2：查看node的版本号 ###

下载好node之后，以管理员身份打开cmd管理工具，，输入 node -v ，回车，查看node版本号，出现版本号则说明安装成功。

输入命令： node -v

![format_png 1][]

image

### 3：安装淘宝npm镜像 ###

由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue.  
淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

![format_png 2][]

image

### 4：安装全局vue-cli脚手架 ###

淘宝镜像安装成功之后，我们就可以全局vue-cli脚手架，输入命令：cnpm install --global vue-cli 回车；验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；

输入命令：cnpm install --global vue-cli

![format_png 3][]

image

5：开始进入主题，初始化一个vue项目

我这里是在d盘里面新建一个项目，先用`d:`的命令，回车键进入d盘；回车键默认创建项目信息。

vue init webpack itemname

![format_png 4][]

image

出现这样的提示，初始化成功

![format_png 5][]

image

根据提示输入运行项目（安装依赖很重要哦，千万不要忘记了，忘记安装后面出的问题就比较多哦~）

# 安装依赖，走你
    $ cd itemname
    $ npm install
    $ npm run dev

在浏览器就可以看到效果了。

![format_png 6][]

运行初始化demo，输入命令npm run dev；运行一下初始后的demo，弹出访问地址，如果没有问题则进行安装elementUI；准备好好之后，开始引入饿了么elementUI组件。

6：安装 elementUI

npm i element-ui -S

快捷键ctrl+c,终止批处理操 作吗(Y/N)，在输入命令npm i element-ui -S

![format_png 7][]

注意：安装过程中出现这样的bug的时候，需要解决

![format_png 8][]

image

解决办法：尝试 删除项目中的 package-lock.json 文件 和 node\_modules 文件夹，然后再尝试 npm install.

成功安装组件显示如下

![format_png 9][]

image

7：在components文件夹下面创建test.vue文件，复制一段elementUI官方文档的代码，进行测试

![format_png 10][]

<template>
        <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>
            <el-menu-item index="3">
                <a href="https://www.ele.me" target="_blank">订单管理</a>
            </el-menu-item>
        </el-menu>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    activeIndex: '1',
                    activeIndex2: '1'
                };
            },
            methods: {
                handleSelect(key, keyPath) {
                    console.log(key, keyPath);
                }
            }
        }
    </script>

8：在App.vue中引入test.vue

![format_png 11][]

<template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
        <Test></Test>
      </div>
    </template>
    
    <script>
        import Test from './components/test.vue'
    
    export default {
        components:{
      Test,
     },
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

9：打开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

![format_png 12][]

10：再次运行，组件中的效果如下：

输入命令：

npm run dev

![format_png 13][]

image

引入成功了，开始开发咯~

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM4MDEy_size_16_color_FFFFFF_t_70][]

[http_caibaojian.com_vue_guide_installation.html]: https://links.jianshu.com/go?to=http%3A%2F%2Fcaibaojian.com%2Fvue%2Fguide%2Finstallation.html
[https_element.eleme.cn_zh-CN]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN
[https_www.jianshu.com_p_094eccb84267]: https://www.jianshu.com/p/094eccb84267
[https_nodejs.org_en]: https://links.jianshu.com/go?to=https%3A%2F%2Fnodejs.org%2Fen%2F
[format_png]: /images/20221120/1b47d9b593e04091813ba7df52c6e343.png
[format_png 1]: /images/20221120/495e7029d9574e899fe6edcbd4746c72.png
[format_png 2]: /images/20221120/39c884ed5e5c4641bf4036b766a5e2df.png
[format_png 3]: /images/20221120/f259513c67fe4081be5c3f8de1348a95.png
[format_png 4]: /images/20221120/9d2024673a1b4ce48ef57c03e41dcb18.png
[format_png 5]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWE0YzI1OTllYTdlZjgwZDcucG5n?x-oss-process=image/format,png
[format_png 6]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWZiYTdiNzliMGMzOWY3YzAucG5n?x-oss-process=image/format,png
[format_png 7]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTIxMDU4ZjBkZTYxNzljNGEucG5n?x-oss-process=image/format,png
[format_png 8]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTI5ODlkNDY3MTZhNTZiNWYucG5n?x-oss-process=image/format,png
[format_png 9]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTk4ZjNlMWE2YWU1NzkzZWYucG5n?x-oss-process=image/format,png
[format_png 10]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTUyNGFlN2Y3MDE0YzczMGEucG5n?x-oss-process=image/format,png
[format_png 11]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWI0YTZlYTFhYTY2NGExMWMucG5n?x-oss-process=image/format,png
[format_png 12]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWM2OWU0ZjQ0NmNjMWRjMjkucG5n?x-oss-process=image/format,png
[format_png 13]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTI0ODkwZDFkODg0MzQwYTQucG5n?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM4MDEy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/202011051107166.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTM4MDEy,size_16,color_FFFFFF,t_70