搭建idea下的vue工程

1.在本机安装nodejs和npm

2.打开idea新建module选择static web:demo

3.在demo下新建node_modules文件夹

4.右键文件夹选择Mark Directory as – Excluded

5.进入到我们的工作目录
cd ~/IdeaProjects/

6.使用脚手架安装项目
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

7.进入项目目录
cd demo

8.初始化项目(注:如未装淘宝镜像,一下cnpm换为npm即可)
cnpm i

9.运行项目
cnpm run dev

10.浏览器打开:localhost:8080,即可看到vue项目
如8080端口被占用则会改用其它端口,注意查看日志
Ctrl+C退出运行

11.安装项目依赖,分别是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

1.File – Settings – Languages&Frameworks – JavaScript:
修改JavaScript language version为ECMAScript 6,确认

2.File – Settings – Plugins:
搜索vue,安装Vue.js
3.Run – Edit Configurations…:
点击加号,选择npm,Name为Dev,package.json选择你工程中的package.json,
Command为run,Scripts为dev,然后就可以直接在idea中运行了。
4.继续点击加号,选择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 // 常用工具文件

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

scss引入方法
<style lang=”scss”>
@import “./style/style.scss”;
</style>

发表评论

电子邮件地址不会被公开。 必填项已用*标注