搭建idea下的vue工程

需要先安裝好nodejs和npm

輸入下面的命令檢視是否成功安裝

node -v

npm -v

工作目錄：ideaprojects

使用idea新建static web專案：demo

在demo目錄下新建node_modules資料夾

因為後面node_modules中的內容太多，並且我們不會用到，所以在idea中右鍵該資料夾，選擇mark directory as - excluded

開啟命令提示符

首先安裝使用**npm映象：

如果許可權不夠，請使用管理員執行命令提示符

安裝vue-cli，vue腳手架：

cnpm i -g vue-cli

vue -v

進入我們的工作目錄：

cd ~/ideaprojects/

vue init webpack demo

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

進入專案目錄：

cd demo

cnpm i

cnpm run dev

ctrl+c退出執行

安裝專案依賴,分別是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

修改專案配置

修改/config/index.js檔案，找到

port: 8080

修改為port: 
8070

productionsourcemap: true

修改為productionsourcemap: 
false

module.exports =,

修改為module.exports =,

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

注：使用static裡的檔案盡量使用絕對路徑，如/static/image/background.png

使用src裡的檔案則盡量使用相當路徑。

附（我的vue專案結構）：

src資料夾

├── 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 //

常用工具檔案

static資料夾

├── css                          //

css資料夾
├── js //
js資料夾
├── image //
資料夾└── font //
字型資料夾

初學VUE，搭建web工程（windows）

node.js官網 win r 輸入 node v 檢視node版本號，是否安裝成功 npm install g cnpm registry 國內鏡象 npm config set registry win r 輸入 cnpm v 檢視cnpm版本號，是否安裝成功 win r 輸入 cnpm ins...

vue裡搭建工程流程

vue cli 乙個簡單的構建vue.js專案的命令列介面 整體過程 npm install g vue cli vue init webpack vue admin cd vue admin npm install npm run dev 後面分步說明。前提條件，node.js 4.x版本，建議使...

Vue之使用腳手架搭建Vue工程

1 新建乙個空資料夾，我們利用這個空資料夾來放置我們的vue專案，注意 最好不要使用中文名稱哦。輸入命令 此處我使用的 cnpm cnpm install g vue cli 再次在命令列介面輸入指令 vue 出現以下資訊就是安裝成功了。4 下面，我們就可以使用 vue cli 腳手架來搭建vue工...