搭建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

瀏覽器開啟：localhost:8080，即可看到vue專案

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

配置idea

修改專案配置

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

port: 8080

修改為port:

8070

productionsourcemap: true

修改為productionsourcemap:

false

修改/build/webpack.base.conf.js檔案，找到

module.exports =,
修改為module.exports =,

最後在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專案就ok啦，並且可以在idea中編輯和執行。

注：使用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 //

字型資料夾

scss引入方法，例

參考：

初學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工...

搭建idea下的vue工程

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

vue裡搭建工程流程

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

相關推薦