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镜像,安装的很快
            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引入方法，例
        <style lang="scss">
          @import "./style/style.scss";
        </style>

最后

以上就是高兴柠檬为你收集整理的Idea搭建Vue开发环境:第一个Vue程序的全部内容，希望文章能够帮你解决Idea搭建Vue开发环境:第一个Vue程序所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。