vue2.0 搭建开发环境的教程来咯~~学习一下吧

冷不防 2022-11-22 05:10 177阅读 0赞

对于一个新手来说，学习一个框架最重要的事情就是记录一下过程，下次再回顾的时候就很容易记住步骤了，不记得也可以直接翻出来自己之前写过的教程，几次之后也就顺手很多了，学习这个循序渐进的过程里面，笔记千万不可以少哦，下面就是我随手记录的一些笔记。

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

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

vue项目中引入饿了么elementUI组件  
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），不然会出现很多报错。

![6f90550e5870bb8675b02720c96c2c14.png][]

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

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

输入命令： node -v

![image][]

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

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

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

![image][image 1]

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

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

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

![image][image 2]

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

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

vue init webpack itemname

![image][image 3]

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

![image][image 4]

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

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

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

![b1be11ddc40c666343a81f450c65c318.png][]

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

#### 6：安装 elementUI ####

npm i element-ui -S

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

![ecd81deabb8dea23f3cc1d40035f6fb0.png][]

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

![image][image 5]

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

成功安装组件显示如下

![image][image 6]

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

![bdac35bc47a33bdfb9bdc25604e7f04e.png][]

<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 ####

![b1f1796acb3ff53106b353f53d3fd4fb.png][]

<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

![5a5791b82b51a6fa4774dacd2d6ce309.png][]

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

输入命令：

npm run dev

![image][image 7]

引入成功了，开始开发咯~  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[https_nodejs.org_en]: https://links.jianshu.com/go?to=https%3A%2F%2Fnodejs.org%2Fen%2F
[6f90550e5870bb8675b02720c96c2c14.png]: /images/20221120/0352cebaf9e14a539c44d9db156c0a23.png
[image]: /images/20221120/d9d97ba7cd59457aa09f0f1d025180ad.png
[image 1]: /images/20221120/9b4dfbc109ae47b4a5a044eb9a82a768.png
[image 2]: /images/20221120/4e4b30e2f455404f96d09ea6f0f6b3fa.png
[image 3]: /images/20221120/29a64288158941bfaedaec62ae5317b9.png
[image 4]: /images/20221120/2ece05838a914825a8f90d307e0b2c58.png
[b1be11ddc40c666343a81f450c65c318.png]: /images/20221120/d0dd5df879df4b8998463d60a5fa9a2a.png
[ecd81deabb8dea23f3cc1d40035f6fb0.png]: /images/20221120/12d09ace40dd42f0ac9e8cd8a8037646.png
[image 5]: /images/20221120/4548983ade084fbab3d8407d44c3b540.png
[image 6]: /images/20221120/b72b3ded631a4a1ca615334de001439d.png
[bdac35bc47a33bdfb9bdc25604e7f04e.png]: /images/20221120/6e2a86d888a14baf87aae36e814fa800.png
[b1f1796acb3ff53106b353f53d3fd4fb.png]: /images/20221120/63651a505e694575b24b938c5f01eac8.png
[5a5791b82b51a6fa4774dacd2d6ce309.png]: /images/20221120/b4b6021a59214f348986534440cea236.png
[image 7]: /images/20221120/a0de58b862d944b99f020269628af07d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/2656a57c5900429f950886252eb9a7f6.png