精华内容
下载资源
问答
  • 文章目录前言导入 Vue 项目开始导入选择项目选择项目类型运行前的准备File -> Settings 中设置JS 版本Vue.js 的插件开始运行运行过程查看结果 前言 首先,准备一个 vue 项目,如果不知道如何创建,请参考: Vue ...

    前言

    首先,准备一个 vue 项目,如果不知道如何创建,请参考:
    Vue UI 创建并运行前端项目

    导入 Vue 项目

    开始导入

    在这里插入图片描述

    选择项目

    在这里插入图片描述
    选择之后,直接点击 ok 即可。

    选择项目类型

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    完成,点击 Finish。

    运行前的准备

    File -> Settings 中设置JS 版本

    在这里插入图片描述

    Vue.js 的插件

    Plugins 中搜一下 vue,安装次数最多的那个进行安装就 ok 了。
    我这个是安装过的。
    在这里插入图片描述

    开始运行

    在这里插入图片描述

    运行过程

    使用命令:

    // 初始化
    npm install
    // 启动服务
    npm run serve
    

    在这里插入图片描述
    运行过程没有出现错误,然后查看运行结果!

    查看结果

    在这里插入图片描述

    如此便大功告成!
    另外,Ctrl + C 可以结束运行。

    展开全文
  • idea中导入vue项目运行

    千次阅读 2019-10-10 22:15:24
    idea中导入vue项目运行 1. 下载node.js 在搭建vue的开发环境之前,先下载node.js,下载地址:https://nodejs.org/en/https://blog.csdn.net/antma/article/details/86104068 2. 安装 下载好后安装,傻瓜式点下...

    idea中导入vue项目并运行

    1. 下载node.js

    在搭建vue的开发环境之前,先下载node.js,下载地址:https://nodejs.org/en/
    https://blog.csdn.net/antma/article/details/86104068

    2. 安装

    下载好后安装,傻瓜式点下一步直到finish即可
    https://blog.csdn.net/antma/article/details/86104068

    3. 检测安装是否成功

    安装成功后,一般不需要自己手动去配置环境变量,此时可以在命令行输入node -v 和 npm -v 分别查看node和npm的版本号;

    4. 配置npm在安装全局模块时的路径和缓存cache的路径

    在安装路径下新建两个文件夹,分别为:node_global和node_cache


    • 然后在命令行中执行如下两个命令:(报错时是因为权限不足,需要使用管理员身份打开cmd再运行下面命令)
    • npm config set prefix "C:\Program Files\nodejs\node_global"
    • npm config set cache "C:\Program Files\nodejs\node_cache"
      执行成功后:
      https://blog.csdn.net/antma/article/details/86104068
      然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”, 值为“D:\Program Files\nodejs\node_modules”,如下图:

      最后编辑用户变量里的Path,将相应npm的路径改为:C:\Program Files\nodejs\node_global

      配置完成!

      5. 测试

      在cmd命令下执行 npm install webpack -g 然后安装成功后可以看到自定义的两个文件夹已生效:
      https://blog.csdn.net/antma/article/details/86104068
      webpack 也已安装成功,执行 npm webpack -v 可以看到所安装webpack的版本号:
      https://blog.csdn.net/antma/article/details/86104068

      6. 在idea中导入vue项目并运行

      setting-->plugins-->搜索vue-->选择第一个-->installed


      导入vue项目
      然后选择

      package.json为当前项目目录下的package.json文件,scripts 选择 dev

      继续添加npm
      前面一样,scripts选择bulid

      选择项目,点击

    虽然会报 Opening index.html over file:// won't work.这个错误,但是好像没啥影响,在网上搜了一圈也没搞清楚啥原因
    点击
    输入 npm run dev

    运行结果

    参考博客:https://blog.csdn.net/antma/article/details/86104068

    展开全文
  • 网上太多的教程创建Vue项目都是用命令行,黑窗口和复杂配置对初学者和学习者太不友好了,而且也很少说如何在idea中运行Vue项目。 因此,笔者将在此文引导大家用Vue ui指令来在图形化界面创建Vue项目,引入Element-ui...

    一:前言

    网上太多的教程创建Vue项目都是用命令行,黑窗口和复杂配置对初学者和学习者太不友好了,而且也很少说如何在idea中运行Vue项目。
    因此,笔者将在此文引导大家用Vue ui指令来在图形化界面创建Vue项目,引入Element-ui插件,并在Idea中运行。
    操作环境:win10、idea2019.1.3、node版本:v12.18.1、npm版本:6.14.5、@vue/cli 4.4.6

    二:操作

    1.首先笔者默认大家搭建好Vue环境了,而且Vue-cli的版本是3.x或者以上了。(没有满足条件的,大家得去配置好环境先。配置环境是学习任何一种编程语言的必经之旅。)

    2.图形化创建开始
    用cmd打开黑窗口,输入vue ui指令。
    vue1
    3.然后会自动跳转到网页端。
    如果你之前有用图形化界面创建过Vue项目,像笔者一样,页面就是这样的。
    如果没有用过图形化界面创建Vue,直接跳到下面的③区域。
    ①.点击红区。
    vue2
    ②.选项目管理器
    vue3
    ③.创建项目
    vue4
    ④.起名字、确定存放位置、测试项目笔者就不初始化为git仓库了
    Vue5
    ⑤.选手动
    Vue6
    ⑥.打开和关闭某些功能
    Vue7
    ⑦.打开一个配置,创建项目
    Vue8
    ⑧.创建需要一些时间,具体时间看个人电脑配置和网速。创建完之后,可以在网页左边看到
    项目名字和菜单栏。
    Vue9
    ⑨.笔者想要用Element-UI,得添加对应组件。点插件。点添加。搜element-ui,然后选上,安装。
    Vue10
    Vue11
    ⑩.成功了,插件那里多了element-ui
    Vue12
    然后,在黑窗口那里按Ctrl+C,就安全退出Vue图形化创建项目过程。
    图形化创建项目结束。

    4.用Idea导入项目开始。
    File—>Open
    idea1
    找到项目文件目录,刚刚创建时放置的位置,然后点OK
    idea2
    进入idea之后,需要修改两个配置:安装运行的Vue.js的插件和修改Javascript语言版本
    先点File,然后找setting
    idea3
    也是File,然后找setting
    idea4
    在idea终端输入启动命令:npm run serve,回车
    idea5
    随便点个地址,localhost就是本地主机号,都一样的
    idea6
    idea导入Vue项目并运行成功,想结束运行也是在terminal那里按Ctrl+C
    idea7
    5.运用Element-ui
    笔者简单介绍一下运用,简单版的。
    进element-ui官网:https://element.eleme.cn/#/zh-CN/component/installation
    找个喜欢的组件。
    笔者找了这个。
    e1
    代码内容:

    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
            <el-menu-item-group>
              <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-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>导航三</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="3-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="3-4">
              <template slot="title">选项4</template>
              <el-menu-item index="3-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>
      
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>
        
        <el-main>
          <el-table :data="tableData">
            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
    
    <style>
      .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
      }
      
      .el-aside {
        color: #333;
      }
    </style>
    
    <script>
      export default {
        data() {
          const item = {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          };
          return {
            tableData: Array(20).fill(item)
          }
        }
      };
    </script>
    

    分开复制填充到到App.vue的<template>标签里面,把<script><style>覆盖掉App.vue中的<script><style>标签。(填充到和覆盖掉是重点)

    6.再在terminal中输入:npm run serve命令
    euitest
    成功效果:
    eui1

    三:尾言

    本文适合那种不知怎么用图形化界面创建Vue项目的,不知如何用idea导入项目的,不知道如何在Vue项目中引入Element-ui插件的。

    展开全文
  • 在搭建vue的开发环境之前,先下载node.js,下载地址:https://nodejs.org/en/https://blog.csdn.net/antma/article/details/86104068 2. 安装 下载好后安装,傻瓜式点下一步直到finish即可...

    1. 下载node.js

    在搭建vue的开发环境之前,先下载node.js,下载地址:https://nodejs.org/en/
    https://blog.csdn.net/antma/article/details/86104068

    2. 安装

    下载好后安装,傻瓜式点下一步直到finish即可
    https://blog.csdn.net/antma/article/details/86104068

    3. 检测安装是否成功

    安装成功后,一般不需要自己手动去配置环境变量,此时可以在命令行输入node -v 和 npm -v 分别查看node和npm的版本号;

    4. 配置npm在安装全局模块时的路径和缓存cache的路径

    在安装路径下新建两个文件夹,分别为:node_global和node_cache


    • 然后在命令行中执行如下两个命令:(报错时是因为权限不足,需要使用管理员身份打开cmd再运行下面命令)
    • npm config set prefix "C:\Program Files\nodejs\node_global"
    • npm config set cache "C:\Program Files\nodejs\node_cache"
      执行成功后:
      https://blog.csdn.net/antma/article/details/86104068
      然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”, 值为“D:\Program Files\nodejs\node_modules”,如下图:

      最后编辑用户变量里的Path,将相应npm的路径改为:C:\Program Files\nodejs\node_global

      配置完成!

    5. 测试

    在cmd命令下执行 npm install webpack -g 然后安装成功后可以看到自定义的两个文件夹已生效:
    https://blog.csdn.net/antma/article/details/86104068
    webpack 也已安装成功,执行 npm webpack -v 可以看到所安装webpack的版本号:
    https://blog.csdn.net/antma/article/details/86104068

    6. 在idea中导入vue项目并运行

    setting-->plugins-->搜索vue-->选择第一个-->installed


    导入vue项目
    然后选择

    package.json为当前项目目录下的package.json文件,scripts 选择 dev

    继续添加npm
    前面一样,scripts选择bulid

    选择项目,点击

    虽然会报 Opening index.html over file:// won't work.这个错误,但是好像没啥影响,在网上搜了一圈也没搞清楚啥原因
    点击
    输入 npm run dev

    运行结果

     

    展开全文
  • IntelliJ IDEA安装vue插件 如果要做vue项目开发,需要安装对应的插件。 ... 打开File ->...IntelliJ IDEA导入vue项目 打开File -> Open,选择vue项目的文件夹,等待一会,等项目初始化完成,启动项目
  • vue运行已有项目运行已有项目创建属于自己的vue页面运行自己的vue页面如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个...
  • 文章目录前言新建 vue 文件修改新建的 vue 文件增加标签和样式在 App.vue...如果对这部分不熟悉,请参考:idea 导入 Vue 项目运行(超级详细步骤) 新建 vue 文件 这里我选择之后弹出一个对话框: 输入 vue 文件...
  • VUE项目导入 Vuetify

    2021-03-11 17:02:10
    1、创建Vue项目(webpack或 WebStorm)工具直接创建Vue项目即可。cmd进入项目路径下: npm install vuetify --save 2、进入项目,在 src 目录下创建plugins 目录,并在plugins 目录下创建vuetify.js 文件,其中...
  • IDEA如何导入运行SpringBoot+Vue项目

    万次阅读 2018-12-09 01:13:17
    vue项目导入前准备 vue项目的node_modules直接放入idea会导致idea卡死,所以放入之前要对idea做配置,使idea对node_modules不索引。 操作方法:IntelliJ IDEA -&gt;Preferences -&gt;Editor展开选中File ...
  • Idea导入Vue前端项目

    千次阅读 2020-04-20 20:34:48
    导入项目后,项目结构如下 直接运行的话,在idea下方选择terminal,直接输入rpm run dev即可运行。 出现下图所示,标识运行成功,点击项目地址链接,即可看到项目主页 自己也可以创建一个页面,简单操作一下 ...
  • 移除项目时偶然发现重新导入时出现vue ui命令正常运行,页面正常跳出却不能创建、导入项目。 发现缺少文件。 解决办法一:配置node.js的环境变量(推荐)-- 自行百度。 解决办法二:在node.js或者项目的目录下...
  • vscode运行vue项目

    2021-06-19 16:44:36
    在vscode中vue项目环境搭建和项目运行 文章目录在vscode中vue项目环境搭建和项目运行前言一、vue环境的搭建1.node2.检查是否安装成功 Windows + R 输入 cmd3.安装淘宝镜像(经操作跳过此步不成功)4.安装脚手架5....
  • 1、通过cmd操作小黑框(我就叫他小黑框),输入cd命令,跳转到项目源码的所在位置 2、npm install 3、尝试运行 npm run dev; 4、有些依赖必须依赖于镜像:搜:npm install -g cnpm --registry=https://reg...
  • vue项目运行不成功

    千次阅读 2019-08-12 12:05:55
    第一次遇到 npm run dev 运行vue项目 提示 最后在网上搜了搜说 可能是导入模块时的模块名大小写的问题,比如从npm安装的模块名字 是小写的,比如vuex ;那么导入的时候应该写成 import Vuex from 'vuex' 而...
  • 导入vue项目idea 一、搭建node.js node.js下载地址:http://nodejs.cn/download/ 1.因为我的电脑是mac,所以我下载的是 macOS 安装包(.pkg),安装包版本node-v14.15.4.pkg 2.点击安装包会安装node、npm,点击...
  • 最近用vue-cli 创建了一个项目项目组件需要导入单独的css文件 <style scoped> @import "/src/assets/css/demo.css"; </style> 路径没问题,代码没问题,可当运行起来的时候页面样式却无法加载 搞了...
  • 运行他人vue项目时,无论在cmd还是在vscode内都报错 查报错说是node_module包丢了 首先运行 npm install 运行完后会出fix的语句 按提示继续输入 npm audit fix 然后再执行 npm run fix 即可 ...
  • vue导入excel

    千次阅读 2018-09-26 11:11:34
    cd到当前项目 运行 npm i element-ui -S 安装好了element,然后在项目里面引用,打开src目录下的main.js: import ElementUI from 'element-ui' Vue.use(ElementUI) 2.代码实例: &lt;el-upload class=&...
  • 如何利用vscode运行vue前端项目vscode运行vue前端项目vscode[下载](https://code.visualstudio.com/)vscode切换中文导入vue项目安装[node.js](https://nodejs.org/en/download/)运行vue项目 vscode运行vue前端项目 ...
  • 之前已创建好vue项目,此处和之前一样,可不再创建 需要先安装好nodejs和npm、Nginx 输入下面的命令查看是否成功安装 node -v npm -v 一、开始 工作目录:D:/IdeaProjects 打开命令提示符 首先安装使用淘宝...
  • Vue-cli项目运行流程

    2021-03-22 21:12:27
    Vue-cli项目运行流程 1、package.json package.json是整个项目的配置文件,运行时首先读取里面的配置信息,定义了该项目的基本信息,项目依赖信息,和npm run …的脚本配置 "scripts": { "dev": "webpack-dev-...
  • Vue中的vxe-table教程1-vue项目运行

    千次阅读 2021-01-07 17:01:15
    2. vue项目下的src目录下的main.js中导入相关模块 main.js中增加如下几行代码 import 'xe-utils' import VXETable from 'vxe-table' import 'vxe-table/lib/style.css' Vue.use(VXETable); 3. src目录下的App....
  • 在脚手架的项目运行的命令行为cnpm run dev 打包的命令行为cnpm run build 通过知道这两个咱们去看一下我们这个vue-cli2.0的package.json 在这个里面就是咱们的各种配置 这里面咱们看的是运行和打包 重点来看一下...
  • 如图,这是我的vue项目的运行依赖,其中显示在项目运行vue-router使用的是 3.1.6 版本的,但是通过 webpack 的 externals 节点,来配置并加载外部的 CDN 资源的时候就猜到坑了。如图下: 这里的index.html文件加载...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,502
精华内容 7,800
关键字:

vue导入项目运行

vue 订阅