Idea搭建Vue开发环境:第一个Vue程序

记录一下，原文：

https://blog.csdn.net/mawei7510/article/details/81781042

#### Idea新建Vue步骤

#####1.需要安装好nodejs和npm,然后输入下面的cmd命令查看是否安装好

node -v

npm -v

#####2.在Idea中新建Project,选择static web项目,项目名称:HelloVue

2.0 如果是在maven工程下新建vue工程的话,新建WebMaven,然后再新建static web工程即可

2.1 在HelloVue目录下新建文件夹node_modules,因为后面的node_modules的内容太多,并且我们用不上,

加载很慢,所以在Idea中右键文件夹,选择Make Diretory as -Excluded

2.2 打开terminal,安装使用淘宝npm镜像,安装的很快

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

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

2.3 安装vue-cli，vue脚手架

cnpm i -g vue-cli

2.4 测试安装是否成功

vue -V

#####3.安装

3.2 进入我们的工作目录

cd ~/HelloVue

3.3 使用脚手架安装项目

vue init webpack HelloVue(如果还想在HelloVue目录下新建一个目录HelloVue,那就带上HelloVue,or 就不要HelloVue)

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

#####4.初始化

4.1 进入项目目录 cd HelloVue

初始化项目 cnpm i

运行项目 cnpm run dev

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

Ctrl+C退出运行

4.2 安装项目依赖

分别是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

#####5.配置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中打包了。

#####6.修改项目配置

6.1 修改/config/router.js 找到port修改端口号

port: 8080

修改为

port: 8070

productionSourceMap: true

修改为

productionSourceMap: false //打包压缩混淆源码

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

module.exports = {

entry: {

app: './src/main.js'

修改为

module.exports = {

entry: {

app: ['babel-polyfill', './src/main.js']

6.3 最后在src/main.js中加入

import 'es6-promise/auto'

import promise from 'es6-promise'

import Api from './api/router.js'

import Utils from './utils/router.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中编辑和运行。

#####7.注意事项

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

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

7.3 main.js中配置路由和引入各种控件,类似Application,App.vue中<router-view></router-view>是各种router页面的

父容器,router.js是配置各种路由页面

#####8.附(我的VUE项目结构)

├── App.vue // APP入口文件

├── api // 接口调用工具文件夹

│ └── router.js // 接口调用工具

├── components // 组件文件夹

├── frame // 子路由文件夹

├── main.js // 项目配置文件

├── page // 页面组件文件夹

├── router // 路由配置文件夹

│ └── router.js // 路由配置文件

├── style // scss 样式存放目录

│ ├── base // 基础样式存放目录

│ │ ├── _base.scss // 基础样式文件

│ │ ├── _color.scss // 项目颜色配置变量文件

│ │ ├── _mixin.scss // scss 混入文件

│ │ └── _reset.scss // 浏览器初始化文件

│ ├── scss // 页面样式文件夹

│ └── style.scss // 主样式文件

└── utils // 常用工具文件夹

└── router.js // 常用工具文件

static文件夹

├── css // css文件夹

├── js // js文件夹

├── image // 图片文件夹

└── font // 字体文件夹

scss引入方法，例

@import "./style/style.scss";

</style>

————————————————

原文链接：https://blog.csdn.net/mawei7510/article/details/81781042