I. start

Install vue-cli, Vue scaffolding:

cnpm i -g vue-cli

Test whether the installation is successful:

vue -V

Two, installation

Enter our working directory:

cd ~/IdeaProjects/

Use scaffolding to install projects:

vue init webpack demo

Prompt directory already exists, continue:Y
 Project name: Return
 Project description: return train
 Author: Author's name
 Vue build (whether or not to install a compiler): Enter
 Install vue-router (whether to install Vue routing): Enter
 Use ESLint to lint your code (whether to use ESLint to check the code, we can use idea):n
 Set up unit tests: n
 Setup e2e tests with Nightwatch (also test related):n
 Should we run `npm install` for you after the project has been created? (recommended): Select: No, I will handle that myself

Initialization

Enter the project catalogue:

cd demo

Initialization project:

cnpm i

Operating projects:

cnpm run dev

Browser opens: localhost:8080, you can see the vue project

Ctrl+C quits operation

Installation project dependencies are scss support, ajax tools, element ui, and two compatible packages

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

IV. Configuration idea

1. File - Settings - Languages & Frameworks - JavaScript: Modify JavaScript language version to ECMAScript 6, confirm;
2. File - Settings - Plugins: Search vue, install Vue.js;
3. Run - Edit Configurations... Plus, npm, Name for Dev, package.json for package.json, Command for run, and Scripts for dev, and then you can run directly in idea.
4. Run - Edit Configurations... Plus, npm, Name for Build, package.json for package.json, Command for run, and Scripts for build, and then you can package directly in idea.

V. Modification of Project Configuration

Modify the / config/index.js file to find

port: 8080
 Modified to
port: 8070

productionSourceMap: true
 Modified to
productionSourceMap: false

Modify the / build/webpack.base.conf.js file to find

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

Finally, add in 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);

In this way, a nearly complete vue project is ok, and can be edited and run in idea.

Note: Use absolute paths for files in static, such as / static/image/background.png

Using files in src, try to use equivalent paths.

Attached (my vue project structure):

src folder

├── App.vue                      // APP entry file
├── api                          // Interface Call Tools Folder
│   └── index.js                 // Interface Call Tool
├── components                   // Component Folder
├── frame                        // Subrouting folder
├── main.js                      // Project Profile
├── page                         // Page Component Folder
├── router                       // Routing Configuration Folder
│   └── index.js                 // Routing Profile
├── style                        // scss style storage directory
│   ├── base                     // Basic Style Storage Directory
│   │   ├── _base.scss           // Basic Style File
│   │   ├── _color.scss          // Project color profile variable file
│   │   ├── _mixin.scss          // scss mixed file
│   │   └── _reset.scss          // Browser Initialization File
│   ├── scss                     // Page Style Folder
│   └── style.scss               // Main Style File
└── utils                        // Common Tools Folder
     └── index.js                // Common Tool Files

static folder

├── css                          // css folder
├── js                           // js folder
├── image                        // Picture Folder
└── font                         // Font Folder

scss introduction method, example

<style lang="scss">
  @import "./style/style.scss";
</style>