如何在IDEL中搭建一个VUE项目_idlevue-程序员宅基地

技术标签: Vue.js  vue  

大前提:安装node.js和npm

打开命令提示符(win+R——cmd)

    1. 切换到你想要新建项目的文件夹中下

    2. 运行 npm i -g vue-cli 安装Vue-cli脚手架

    3. 运行 vue init webpack demo(项目名)

    4. cd demo 切换到项目目录下

    5. npm install 初始化

    6. npm run dev 本地运行 浏览器打开localhost:8080即可看到vue项目运行效果

    7. 安装兼容包

npm i node-sass -D
npm i sass-loader -D
npm i axios -D
npm i element-ui -D
npm i babel-polyfill -D
npm i es6-promise -D

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


修改项目配置

1. 修改/config/index.js文件,找到

port: 8080
修改为
port: 8070
productionSourceMap: true
修改为
productionSourceMap: false

2. 修改/build/webpack.base.conf.js文件,找到

module.exports = {
  entry: {
    app: './src/main.js'
  },
修改为
module.exports = {
  entry: {
    app: ['babel-polyfill', './src/main.js']
  },

3. 在src目录下新建两个文件夹api和utils,在分别在这两个文件夹里创建index.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);


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/XB_DL/article/details/79653050

智能推荐

Learning Linux(2)-Petalinux(1)_petalinux package-程序员宅基地

文章浏览阅读595次。zz_petalinux package

【图像去模糊】 deconvolution总结_deconvolution image python-程序员宅基地

文章浏览阅读356次。转 【图像去模糊】 deconvolution总结 ..._deconvolution image python

java编程-类的定义_创建 cat 类。cat 类必须包含 string 变量 name、int 变量 age、int 变-程序员宅基地

文章浏览阅读235次。package day04;/* * 演示的是类的定义 */public class Cat { //定义一个类 ,类名叫Cat int age; //定义一个int类型的成员变量age String name ; //定义一个String类型的成员变量name,成员变量就是类的属性,它们都是名词。 public void shout() { //定义一个成员方法shout..._创建 cat 类。cat 类必须包含 string 变量 name、int 变量 age、int 变量 weight

试题8 算法训练 P0103(从键盘输入一个大写字母,要求改用小写字母输出。)_从键盘输入一个大写字母,要求改用小写字母输出,fun函数-程序员宅基地

文章浏览阅读1.8k次。题目:从键盘输入一个大写字母,要求改用小写字母输出。输入  A输出  a分析思路:主要考虑ASII码值的相互转化a: 对应ASII值为:97A: 对应ASII值为:65大小写之间相差32方法1代码:#include <iostream>#include <algorithm>using namespace std;const int n=2;int main(){char A[n];cin>>A;char B[n];_从键盘输入一个大写字母,要求改用小写字母输出,fun函数

const_cast-程序员宅基地

文章浏览阅读59次。也许大家都有过这样的疑惑:const_cast可以去除一个常量的const属性,去除const属性后应该可以对“常量”进行修改,通过调试器发现内存中的值是被改变的,可是再传递这个“常量”的时候,值却一直保持原状,实在古怪,在Windows下用VC、尝试如此,在Linux下用g++尝试也如此,我原先以为和编译器的优化选项有关系,把所有优化选项关闭,照样没用,为什么?写了个程序进行测试:..._linux const_cast

云服务器部署web项目 超详细步骤 腾讯云 阿里云_2cu怎么连接-程序员宅基地

文章浏览阅读2.1k次,点赞3次,收藏14次。购买阿里云服务器ECS,选择CentOS 7.6操作系统外界用户访问云服务器中实例的示意图重置实例的密码设置安全组规则创建安全组和安全组规则为安全组添加实例使用XShell和XFTP连接到远程实例向实例中安装JDK,MySQL、Tomcat参考步骤:将项目打包通过http://[云服务器实例的ip地址]:8080/crud/,即可在任何位置访问到项目也可直接将war上传到云服务器中,在云服务器的Tomcat中解析.._2cu怎么连接

随便推点

ios定位和android定位差距大,为什么使用plus.geolocation.getCurrentPosition在Android上定位有很大偏差,但在IOS上定位是准确的?...-程序员宅基地

文章浏览阅读2.1k次。map {width: 100%;position: fixed;top: 0px;bottom: 0px;line-height: 200px;text-align: center;background: #FFFFFF;}let map = null;mui.init();mui.plusReady(function() {map = new plus.maps.Map('map');map...._plus.geolocation.watchposition 获取延迟

无法通过小乌龟推送远端代码 Git : Could not read from remote repository_小乌龟推送远端怎么配置url-程序员宅基地

文章浏览阅读3.5k次。转自: https://blog.csdn.net/rlnote/article/details/80711095git 项目选择 Clone or download 的Https地址.配置小乌龟,git=&gt;远端 URL改SSH地址为Https地址. _小乌龟推送远端怎么配置url

Part 10:iOS的数据持久化(2),Sqlite,CoreData_cstring(using: string.encoding.unicode.rawvalue)-程序员宅基地

文章浏览阅读106次。代码】Part10iOS的数据持久化(2),Sqlite,CoreData。_cstring(using: string.encoding.unicode.rawvalue)

shell脚本创建用户及批量创建用户_linux循环语句实现批量用户创建-程序员宅基地

文章浏览阅读1.6w次,点赞9次,收藏32次。创建用户#!/bin/sh#设置变量name接收第一个参数(要创建的用户名),$n表示第n个参数,且=两边不能有空格name=$1#设置变量pass接收第二个参数(要为其设置的密码)pass=$2#echo语句会输出到控制台,${变量}或者 $变量 表示变量代表的字符串echo "you are setting username : ${name}"echo "you are settin_linux循环语句实现批量用户创建

《深入理解Android 卷III》第八章深入理解Android壁纸-程序员宅基地

文章浏览阅读654次。《深入理解Android 卷III》第八章深入理解Android壁纸2015-08-14 13:45 8686人阅读 评论(1) 收藏 举报 分类:Android开发系列(106) 版权声明:本文为博主原创文章,未经博主允许不得转载。目录(?)[+]《深入理解Android 卷III》即将发布,作者是张大伟_《深入理解android 卷iii》第八章

webstorm2016.2激活方法-程序员宅基地

文章浏览阅读4.4k次。License server激活这可能是最简单的了,在激活框,选择 License server 输入http://idea.iteblog.com/key.php 就可以激活了.这是我见过的最简单的方法.没有之一.