草庐IT

新建Vue项目 并引入element ui（cmd中vue ui没有反应的解决办法）

柠檬气泡水~ 2023-07-28 原文

一、 VScode新建vue项目：

1、安装node.js

我们需要的是NodeJS里npm工具，npm是NodeJS下的一个包管理工具，它可以很方便的帮你管理（可以简单理解为下载）各类前端的框架或插件

我们可以去官网下载https://nodejs.org/zh-cn/download/
附安装教程：http://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html

2、安装cnpm

官网：https://npmmirror.com/

npm install -g cnpm --registry=https://registry.npmmirror.com

在vsCode中输入cnpm -v查看是否安装成功，如果出现一下则安装成功

如果报错如下，则参考https://blog.csdn.net/weixin_46483006/article/details/125949159?spm=1001.2014.3001.5502

3、安装yarn

4、安装vue-cli脚手架，cnpm install -g @vue/cli

指定版本：
如是3.0以下npm install -g vue-cli@版本号
如是3.0以上npm install -g @vue/cli@版本号

vue -V(大写的V)，查看是否安装成功

5、新建vue项目

vscode打开新疆项目的目录下
输入vue create 项目名（项目名中不能有大写字母，会报错，可以加-）

6、我们选择第三个

选择用yarn下载速度快

新建成功：

7、启动项目，记得进入项目目录下输入npm run serve

如果新建以后打开文件，项目中每个文件的第一行都会有红色波浪线
报错Parsing error: No Babel config file detected for D:\A_projects\vue-demo\demo2\src\main.js.
可以参考链接:
https://blog.csdn.net/weixin_46483006/article/details/125951130?spm=1001.2014.3001.5502

8、全局引入element ui

element组件官方文档：https://element.eleme.cn/#/zh-CN/component/button

①安装

vscode终端输入：npm i element-ui -S

如果报错如下：

可以输入：cnpm i element-ui -s

②配置

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

9、按需引入element ui

①引入插件（非必须）

cnpm install babel-plugin-component -D

②配置，以引入button按钮和Radio 单选框为例

import {Button,Radio} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Button);
Vue.use(Radio);


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

③代码

④运行项目npm run serve

二、cmd中vue ui新建项目

这种方法方便配置和安装插件

1、cmd中输入vue ui

如果cmd中vue ui没有反应的解决办法：

可以先输入vue -h查一下有没有vue ui这个命令：
vue -h 没有这个命令，说明发现是版本太低

升级脚手架即可(版本3.0.0以上的脚手架才有此命令)
输入：cnpm i -g @vue/cli

2、输入之后，自动弹出网页，进行新建项目。之前有过项目的，进入后可以在左下角点击小房子图标进入

点击创建，选择创建的位置

3、项目配置选择手动

具体功能选择如下

配置中，开启历史模块

4、保存预设的话，下次新建就相当于一个模板

5、创建完成以后，点击插件进行插件添加，引入element ui

导入element插件成功：

反应elementspanclasstokenvue.jswebpack前端

有关新建Vue项目 并引入element ui（cmd中vue ui没有反应的解决办法）的更多相关文章

  1. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  2. ruby - 难道Lua没有和Ruby的method_missing相媲美的东西吗？ - 2

    我好像记得Lua有类似Ruby的method_missing的东西。还是我记错了？ 最佳答案 表的metatable的__index和__newindex可以用于与Ruby的method_missing相同的效果。 关于ruby-难道Lua没有和Ruby的method_missing相媲美的东西吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/7732154/

  3. ruby-on-rails - rails 目前在重启后没有安装 - 2

    我有一个奇怪的问题:我在rvm上安装了ruby​​onrails。一切正常，我可以创建项目。但是在我输入“railsnew”时重新启动后，我有“程序'rails'当前未安装。”。SystemUbuntu12.04ruby-v"1.9.3p194"gemlistactionmailer(3.2.5)actionpack(3.2.5)activemodel(3.2.5)activerecord(3.2.5)activeresource(3.2.5)activesupport(3.2.5)arel(3.0.2)builder(3.0.0)bundler(1.1.4)coffee-rails(

  4. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  5. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  6. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

  7. Ruby 从大范围中获取第 n 个项目 - 2

    假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目？ 最佳答案 一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做，或者如果你需要避免为前N个元素构建中间数组，你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit

  8. 没有类的 Ruby 方法？ - 2

    大家好!我想知道Ruby中未使用语法ClassName.method_name调用的方法是如何工作的。我头脑中的一些是puts、print、gets、chomp。可以在不使用点运算符的情况下调用这些方法。为什么是这样？他们来自哪里？我怎样才能看到这些方法的完整列表？ 最佳答案 Kernel中的所有方法都可用于Object类的所有对象或从Object派生的任何类。您可以使用Kernel.instance_methods列出它们。 关于没有类的Ruby方法？，我们在StackOverflow

  9. ruby-on-rails - Rails 3，嵌套资源，没有路由匹配 [PUT] - 2

    我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容，包括相关问题和stackoverflow上的答案，但仍然无法正常工作。我正在使用嵌套资源，但无法使表单正常工作。我总是遇到错误，例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle

  10. ruby-on-rails - 有没有办法为 CarrierWave/Fog 设置上传进度指示器？ - 2

    我在Rails应用程序中使用CarrierWave/Fog将视频上传到AmazonS3。有没有办法判断上传的进度，让我可以显示上传进度如何？ 最佳答案 CarrierWave和Fog本身没有这种功能；你需要一个前端uploader来显示进度。当我不得不解决这个问题时，我使用了jQueryfileupload因为我的堆栈中已经有jQuery。甚至还有apostonCarrierWaveintegration因此您只需按照那里的说明操作即可获得适用于您的应用的进度条。 关于ruby-on-r

随机推荐