二、Idea 创建一个VUE项目

最新推荐文章于 2024-02-28 10:45:29 发布

两苹果

最新推荐文章于 2024-02-28 10:45:29 发布

阅读量1.3k

点赞数

分类专栏：前端 vue nodejs 文章标签： vue.js node.js

本文链接：https://blog.csdn.net/liangpingguo/article/details/106519604

版权

前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

nodejs

6 篇文章 0 订阅

订阅专栏

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

二、项目配置

修改/config/index.js文件：

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

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

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

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

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

打开idea，File - New - Project ，选择“Static Web”
Next，输入 Project name：my-website

打开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 <liangping880105@163.com>
? 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

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

# 运行成功结果如下

> 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 页.

两苹果

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
二、Idea 创建一个VUE项目

一、使用Idea 新建一个VUE项目打开idea，File - New - Project ，选择“Static Web” Next，输入 Project name：my-website 打开Idea终端工具Terminal，输入 `vue init webpack`,如下： D:\project\IdeaProjects\my-website>vue init webpack? Generate project in current directory? Ye.
复制链接

扫一扫