idea vue 推送harbor idea vue项目

目录

一、使用Idea 新建一个VUE项目

二、项目配置

修改/config/index.js文件：

修改webpack.base.conf.js文件：

在src/main.js中加入：

认识VUE项目的所有文件

调整App.vue，删除无用的

安装支持 scss 的 npm 包

调整 index.vue 和 content.vue 文件index.vue

调整 router 路由文件,不然跑项目还会报错……

运行项目，打开就是首页 page/index 页.

---

一、使用Idea 新建一个VUE项目

1. 打开idea，File - New - Project ，选择“Static Web”
2. Next，输入 Project name：my-website
3. 打开Idea终端工具 Terminal，输入 `vue init webpack`,如下：

D:\project\IdeaProjects\my-website>vue init webpack

? Generate project in current directory? Yes
? Project name my-website
? Project description 我的个人网站
? Author Rache <[e-mail]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "my-website".


# Installing project dependencies ...
# ========================

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

removed 102 packages and audited 1724 packages in 13.256s

29 packages are looking for funding
  run `npm fund` for details

found 99 vulnerabilities (76 low, 9 moderate, 13 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

# Project initialization finished!
# ========================

To get started:

  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

1. 运行
   方式一：终端窗口输入命令：`npm run dev `
   方式二：提前配置好Run/DeBug Configurations,点击运行即可
                （参考IDEA配置:）

# 运行成功结果如下

> my-website@1.0.0 dev D:\project\IdeaProjects\my-website
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 27/31 modules 4 active ...t\IdeaProjects\my-website\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 DONE  Compiled successfully in 3439ms10:44:36 ├F10: AM┤

 I  Your application is running here: http://localhost:8080

Process finished with exit code 1

浏览器访问 http://localhost:8080 即可。

二、项目配置

修改/config/index.js文件：

## 修改默认端口
port: 8080
修改为
port: 8070

## build 项目会生成很多map文件，怎么办？
productionSourceMap: true
修改为
productionSourceMap: false

修改webpack.base.conf.js文件：

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },

修改为：
module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: ['babel-polyfill', './src/main.js']
  },

在src/main.js中加入：

import 'es6-promise/auto'import promise from 'es6-promise'
import Api from './api/index.js'
import Utils from './utils/index.js'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.prototype.$utils = Utils;
Vue.prototype.$api = Api;
Vue.use(ElementUI);

注：使用static里的文件尽量使用绝对路径，如/static/image/background.png
       使用src里的文件则尽量使用相当路径。

认识VUE项目的所有文件

├── README.md                       // 项目说明文档
├── node_modules                    // 项目依赖包文件夹
├── build                           // 编译配置文件，一般不用管
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config                          // 项目基本设置文件夹
│   ├── dev.env.js              // 开发配置文件
│   ├── index.js                    // 配置主文件
│   └── prod.env.js             // 编译配置文件
├── index.html                      // 项目入口文件
├── package-lock.json           // npm5 新增文件，优化性能
├── package.json                    // 项目依赖包配置文件
├── src                             // 我们的项目的源码编写文件
│   ├── App.vue                 // APP入口文件
│   ├── assets                      // 初始项目资源目录，回头删掉
│   │   └── logo.png
│   ├── components              // 组件目录
│   │   └── Hello.vue           // 测试组件，回头删除
│   ├── main.js                 // 主配置文件
│   └── router                      // 路由配置文件夹
│       └── index.js            // 路由配置文件
└── static                          // 资源放置目录

src 结构比较简单，我们需要重新配置： 

src文件夹：

├── App.vue                      // APP入口文件
├── api                          // 接口调用工具文件夹
│   └── index.js                 // 接口调用工具
├── components                   // 组件文件夹
├── frame                        // 子路由文件夹
├── main.js                      // 项目配置文件
├── page                         // 页面组件文件夹
├── router                       // 路由配置文件夹
│   └── index.js                 // 路由配置文件
├── style                        // scss 样式存放目录
│   ├── base                     // 基础样式存放目录
│   │   ├── _base.scss           // 基础样式文件
│   │   ├── _color.scss          // 项目颜色配置变量文件
│   │   ├── _mixin.scss          // scss 混入文件
│   │   └── _reset.scss          // 浏览器初始化文件
│   ├── scss                     // 页面样式文件夹
│   └── style.scss               // 主样式文件
└── utils                        // 常用工具文件夹
     └── index.js                // 常用工具文件

static文件夹（如果是放在 src 目录里面，则每次打包的时候，都需要打包的。这会增加打包项目的时间）：

├── css // css文件夹 ├── js // js文件夹 ├── image // 图片文件夹 └── font // 字体文件夹

scss引入方法，例

<style lang="scss"> @import "./style/style.scss"; </style>

调整App.vue，删除无用的
 

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="scss">
  @import "./style/style";
</style>

入口，只有一个空的路由视窗，我们的项目的所有内容，都基于这个视窗来展现。
我们的样式，都将从 src/style/style.scss 这个文件中引用，因此，在 App.vue 这个文件中，直接引用 ./style/style 即可。

安装支持 scss 的 npm 包

npm install node-sass -D
npm install sass-loader -D
npm install style-loader --save-dev

# 网络不好，用：
cnpm install node-sass -D
cnpm install sass-loader -D
cnpm install style-loader --save-dev

#  版本问题，可能会导致运行报错
## 首先清除我们已经安装过的版本：
npm uninstall node-sass 
npm uninstall sass-loader
npm uninstall style-loader
## 注意我们清除的时候可以选择全局的清除 全局的安装，否则下次创建 项目还会有同样的错误 执行重复的操作

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/  //淘宝镜像安装
npm install sass-loader@7.3.1 --save-dev　　　 //安装7.3.1版本的sass
npm install style-loader --save-dev           // 安装style-loader

调整 index.vue 和 content.vue 文件
index.vue

<template>
  <div>index page</div>
</template>

content.vue

<template>
  <div>content page</div>
</template>

调整 router 路由文件,不然跑项目还会报错……
 

# 默认的 HelloWorld
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

修改为：
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/page/index'
import Content from '@/page/content'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Index
    }, {
      path: '/content/:id',
      component: Content
    }
  ]
})

首页，就是我们的 Index 组件
:id 是什么意思？
  内容页面是要展示N条内容，如何区分，就是根据这个ID来区分的，所以，这里使用了动态路由匹配。

运行项目，打开就是首页 page/index 页.