搭建idea下的vue工程教程

需要先安装好nodejs和npm

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

?

1 2	node -v npm -v

一、开始

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

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

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

?

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

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

安装vue-cli，vue脚手架：

?

1	cnpm i -g vue-cli

测试是否安装成功：

?

1

vue -V

二、安装

进入我们的工作目录：

?

1	cd ~/IdeaProjects/

使用脚手架安装项目：

?

1	vue init webpack demo

?

1 2 3 4 5 6 7 8 9 10

提示目录已存在，是否继续：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

三、初始化

进入项目目录：

?

1

cd demo

初始化项目：

?

1

cnpm i

运行项目：

?

1	cnpm run dev

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

Ctrl+C退出运行

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

?

1	cnpm i node-sass -D

?

1 2 3 4 5 6 7 8 9

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文件，找到

?

1 2 3

port: 8080 修改为 port: 8070

?

1 2 3

productionSourceMap: true 修改为 productionSourceMap: false

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

?

1 2 3 4 5 6 7 8 9

module.exports = {   entry: {     app: './src/main.js'   }, 修改为 module.exports = {   entry: {     app: ['babel-polyfill', './src/main.js']   },

最后在src/main.js中加入

?

1 2 3 4 5 6 7 8 9 10

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文件夹

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

├── 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文件夹

?

1 2 3 4

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

scss引入方法，例

?

1	<style lang="scss" type="text/css" data-filtered="filtered">@import "./style/style.scss";</style>