Idea搭建Vue开发环境：第⼀个Vue程序
记录⼀下，原⽂：
#### 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镜像，安装的很快
如果权限不够，请使⽤管理员运⾏命令提⽰符
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
idea开发安卓app教程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 - ：点击加号，选择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/f.js⽂件，到
entry: {
app: './src/main.js'
},
修改为
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引⼊⽅法，例
<style lang="scss">
@import "./style/style.scss";
</style>
————————————————
版权声明：本⽂为CSDN博主「mawei7510」的原创⽂章，遵循CC 4.0 BY-SA版权协议，转载请附上原⽂出处链接及本声明。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。

最新IntelliJIDEA详细配置步骤(图文版)
« 上一篇
2020最新版idea激活教程(推荐)
下一篇 »

发表评论

Copyright © 2024 baidu.com
Powered By 688IT编程网 豫ICP备2022007602号 豫公网安备41160202000602