如何在IDEL中搭建一个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);


你可能感兴趣的:(Vue.js)