java web (安装配置idea，创建vue项目，引入bootstrap)

最新推荐文章于 2024-08-14 13:21:19 发布

我肚子好饿

最新推荐文章于 2024-08-14 13:21:19 发布

阅读量1.4k

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/qq_36780295/article/details/113106964

版权

web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、idea安装和配置：

idea下载地址：https://www.jetbrains.com/idea/download/#section=windows

安装时的设置：
在这里插入图片描述

2、安装vue.js：

（1）安装：

在Plugins中安装插件，搜索vue.js，然后install。
（直接在Plugins的Marketplace中搜索有时会提示没有网络连接，后来我先是用idea中随便打开了一个html文件，然后Files->Settings->Plugins就可以正常搜索到，并安装了）
在这里插入图片描述

（2）语法提示：

参考自：https://www.cnblogs.com/maggieq8324/p/11458752.html

File->setting->Editor->Inspections，右侧找到HTML->Unknown HTML tag attribute，在右边Options->Custom HTML tag attributes里面添加如下代码:

@tap
@tap.stop
@tap.prevent
@tap.once
@click
@click.stop
@click.prevent
@click.once
@change
@change.lazy
@change.number
@change.trim
@on
@blur
@fous
@submit
scoped
v-model
v-model.number
v-model.trim
v-for
v-text
v-html
v-show
v-if
v-else-if
v-else
v-pre
v-bind
v-bind:class
v-bind:style
v-bind:id
v-bind:href

在这里插入图片描述

3、创建项目、项目结构及简单的使用：

（1）创建`vue`项目：

新建项目，选择Vue.js：
在这里插入图片描述
填写项目名称等后，会进入项目构建和必要模块的下载，如npm。如果像我一样npm没有安装，那就会等待较长的时间，安装过程会询问是否使用淘宝镜像进行安装，请务必选择yes：

安装完以后，npm就会出现在右上角了：
在这里插入图片描述
如果没有出现npm，那就需要点开来手动添加创建一个。

点击小三角运行这个web项目：
在这里插入图片描述
按照提示，浏览器打开192.168.1.5:8080/：

哈哈，然而里面什么也没有。

（2）目录结构：

这段部分来自菜鸟教程。

//目录/文件               说明
build                   //项目构建(webpack)相关代码。
config                  //配置目录，包括端口号等。
node_modules            //npm 加载的项目依赖模块。
src                     //开发的目录，里面包含了几个目录及文件：
                           //assets: 放置一些图片，如logo等。
                           //components: 目录里面放了一个组件文件，可以不用。
                           //App.vue: 项目入口文件，可以直接将组件写这里，而不使用 components 目录。
                           //main.js: 项目的核心文件。
static                  //静态资源目录，如图片、字体等。
test                    //初始测试目录，可删除
.xxxx文件               //这些是一些配置文件，包括语法配置，git配置等。
index.html              //首页入口文件，可以添加一些 meta 信息或统计代码。
package.json            //项目配置文件。
README.md               //项目的说明文档，markdown 格式

（3）`vue`项目中`app.vue`、`main.js`和 `index.html`的关联：

资料来自：https://www.cnblogs.com/yeyeyemax/p/6959215.html

main.js：是我们的入口文件，主要作用是初始化vue实例并使用需要的插件。
使用：

import Vue from 'vue'
import App from './App'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

App.vue：是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件
使用：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</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>

（4）简单的修改：

打开src->components->HelloWorld.vue，修改export default：
（代码为name提供了一个string内容）

<script>
export default {
  // name: 'HelloWorld',
  // props: {
  //   msg: String
  // }

  name: 'hello',
  data () {
    return {
      msg: 'hello,这是一个vue项目！'
    }
  }
}
</script>

运行项目：
在这里插入图片描述

4、引入bootstrap：

先下载好bootstrap，下载地址看以前的文章，放到项目目录后，然后在mian.js中添加代码：

import '/public/bootstrap/bootstrap.min.css'     
//路径一定要对准，使用idea的话输入路径会有提示，前面的 / 号不要漏

使用时，如在hello.vue中添加一个绿色按钮的代码：

<button type="button" class="btn btn-success">按钮</button>