win10快速搭建vue开发环境并使用element ui

落日映苍穹つ 2024-04-18 17:47 46阅读 0赞

**1，环境**  
**1.1 node.js安装**  
下载对应你系统的Node.js版本:https://nodejs.org/en/download/  
选安装目录进行安装（安装过程就是全程next，注意不要取消自动配置环境）  
测试：**win+R 输入cmd 进入控制台使用“node -v”，“npm -v”**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXRhaXlpOA_size_16_color_FFFFFF_t_70]  
这样就安装成功了。  
**1.2 cnpm安装**

npm install -g cnpm

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXRhaXlpOA_size_16_color_FFFFFF_t_70 1]  
**3 安装vue框架**

cnpm install -g vue-cli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXRhaXlpOA_size_16_color_FFFFFF_t_70 2]  
**4 使用element ui**  
**4.1 新建一个vue项目**  
创建一个基于webpack模板的新项目  
vue init webpack d:\\nodeworkspace\\nodeone  
切换至该路径  
cd d:\\nodeworkspace\\nodeone  
安装项目依赖文件  
cnpm install  
项目启动  
cnpm run dev

**4.2 引入element ui组件**  
打开cmd 窗口，切换到vue 所在目录，执行如下指令： cnpm i element-ui s  
如果按照上面的路径新建项目

cd d:\nodeworkspace\nodeone
    执行：cnpm  i  element-ui  s

**4.3 Vue 项目引用ElementUI**

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 官方文档**：https://element.eleme.io/\#/zh-CN/component/quickstart

npm run build:prod

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXRhaXlpOA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019091011371948.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXRhaXlpOA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXRhaXlpOA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190910114133692.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXRhaXlpOA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXRhaXlpOA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190910114310582.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXRhaXlpOA==,size_16,color_FFFFFF,t_70