1

2

node -v

npm -v

1

npm i -g cnpm --registry=https:

1

cnpm i -g vue-cli

1

vue -V

1

cd ~/IdeaProjects/

1

vue init webpack demo

1

2

3

4

5

6

7

8

9

10

提示目錄已存在，是否繼續：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

1

cd demo

1

cnpm i

1

cnpm run dev

1

cnpm i node-sass -D

1

2

3

4

5

6

7

8

9

cnpm i sass-loader -D

cnpm i axios -D

cnpm i element-ui -D

cnpm i babel-polyfill -D

cnpm i es6-promise -D

1

2

3

port: 8080

修改為

port: 8070

1

2

3

productionSourceMap: true

修改為

productionSourceMap: false

1

2

3

4

5

6

7

8

9

module.exports = {

entry: {

app: './src/main.js'

},

修改為

module.exports = {

entry: {

app: ['babel-polyfill', './src/main.js']

},

1

2

3

4

5

6

7

8

9

10

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);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

├── App.vue                      // APP入口檔案

├── api                          // 介面呼叫工具資料夾

│   └── index.js                 // 介面呼叫工具

├── components                   // 元件資料夾

├── frame                        // 子路由資料夾

├── main.js                      // 專案配置檔案

├── page                         // 頁面元件資料夾

├── router                       // 路由配置資料夾

│   └── index.js                 // 路由配置檔案

├── style                        // scss 樣式存放目錄

│   ├── base                     // 基礎樣式存放目錄

│   │   ├── _base.scss           // 基礎樣式檔案

│   │   ├── _color.scss          // 專案顏色配置變數檔案

│   │   ├── _mixin.scss          // scss 混入檔案

│   │   └── _reset.scss          // 瀏覽器初始化檔案

│   ├── scss                     // 頁面樣式資料夾

│   └── style.scss               // 主樣式檔案

└── utils                        // 常用工具資料夾

└── index.js                // 常用工具檔案

1

2

3

4

├── css                          // css資料夾

├── js                           // js資料夾

├── image                        // 圖片資料夾

└── font                         // 字型資料夾

1

<style lang="scss" type="text/css" data-filtered="filtered">@import "./style/style.scss";</style>