搭建idea下的vue工程

灰太狼 2022-04-11 13:53 354阅读 0赞

## 快速启动篇 ##

进入项目的目录下运行一下命令即可

初始化项目：（重要！！！！）

cnpm i

运行项目：

cnpm run dev

[cnpm不是内部命令的解决方案：配置环境变量][cnpm]

## 部署篇 ##

打包生成tomcat部署的文件（进入项目目录执行一下命令）

npm run  build

此时项目会生成一个dist目录直接copy里面的内容到tomcat中即可

注意点：

接口地址需要更改：、

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70][]

如果不是部署到tomat的Root目下，项目名称需要修改

## 操作篇 ##

需要先安装好nodejs和npm

输入下面的命令查看是否成功安装

node -v
    npm -v

**一、开始**

工作目录：IdeaProjects  
**使用idea新建Static Web项目：demo**

**在demo目录下新建node\_modules文件夹**  
因为后面node\_modules中的内容太多，并且我们不会用到，所以在idea中右键该文件夹，选择**Mark Directory as - Excluded**

打开命令提示符  
首先安装使用淘宝npm镜像：

npm i -g cnpm --registry=https://registry.npm.taobao.org

如果权限不够，请使用管理员运行命令提示符

安装vue-cli，vue脚手架：

cnpm i -g vue-cli

测试是否安装成功：

vue -V

**二、安装**

进入我们的工作目录：

cd ~/IdeaProjects/

使用脚手架安装项目：

vue init webpack demo

提示目录已存在，是否继续：Y
    Project name（工程名）:回车
    Project description（工程介绍）：回车
    Author：作者名
    Vue build（是否安装编译器）:回车
    Install vue-router（是否安装Vue路由）：回车
    Use ESLint to lint your code（是否使用ESLint检查代码，我们使用idea即可）：n
    Set up unit tests（安装测试工具）：n
    Setup e2e tests with Nightwatch（也是测试相关）：n
    Should we run `npm install` for you after the project has been created? (recommended)：选择：No, I will handle that myself

![复制代码][copycode.gif]

**三、初始化**

进入项目目录：

cd demo

初始化项目：

cnpm i

运行项目：

cnpm run dev

浏览器打开：localhost:8080，即可看到vue项目

Ctrl+C退出运行

安装项目依赖,分别是scss支持，ajax工具，element ui，两个兼容包

cnpm i node-sass -D

cnpm i sass-loader -D
    
    cnpm i axios -D
    
    cnpm i element-ui -D
    
    cnpm i babel-polyfill -D
    
    cnpm i es6-promise -D

配置idea

File - Settings - Languages&Frameworks - JavaScript：修改JavaScript language version为**ECMAScript 6**，确认  
File - Settings - Plugins：搜索vue，**安装Vue.js**  
Run - Edit Configurations...：点击加号，选择npm，Name为Dev，package.json选择你工程中的package.json，**Command为run，Scripts为dev**,然后就可以直接在idea中运行了。  
继续点击加号，选择npm，Name为Build，package.json选择你工程中的package.json，**Command为run，Scripts为build**,然后就可以直接在idea中打包了。

修改项目配置

修改/config/index.js文件，找到

port: 8080
    修改为
    port: 8070

productionSourceMap: true
    修改为
    productionSourceMap: false

修改/build/webpack.base.conf.js文件，找到

module.exports = {
      entry: {
        app: './src/main.js'
      },
    修改为
    module.exports = {
      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);

这样，一个差不多完整的vue项目就ok啦，并且可以在idea中编辑和运行。

**注：使用static里的文件尽量使用绝对路径，如/static/image/background.png**

**使用src里的文件则尽量使用相当路径。**

**附（我的vue项目结构）：**

**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                // 常用工具文件

![复制代码][copycode.gif]

**static文件夹**

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

**scss引入方法，例**

参考：[https://www.cnblogs.com/hackyo/p/7988399.html][https_www.cnblogs.com_hackyo_p_7988399.html]

[cnpm]: https://blog.csdn.net/u014540814/article/details/78777961%C2%A0
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6aHVhbl8x_size_16_color_FFFFFF_t_70]: /images/20220411/0b2bba30fb064d818a318702e7c9c16d.png
[copycode.gif]: /images/20220411/da826c02727c44129f0a071a6e55715f.png
[https_www.cnblogs.com_hackyo_p_7988399.html]: https://www.cnblogs.com/hackyo/p/7988399.html