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页面的

            父容器,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引入方法,例

       

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

版权声明:本文为CSDN博主「mawei7510」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

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

你可能感兴趣的:(Idea搭建Vue开发环境:第一个Vue程序)