webpack搭建vue環境

2021-10-02 17:12:08 字數 1780 閱讀 6565

npm init -y

cnpm i webpack webpack-cli -

dcnpm i webpack-dev-server -

dcnpm i vue -

scnpm i html-webpack-plugin -

d建立src/index.html , src/main.js , webpack.config.js,修改package

.json檔案

package.json

,}

index.html

>

<

/div>

main.js

import vue from

'vue'

;new

vue(})

;

webpack.config.js

const path =

require

('path');

const htmlwebpackplugin =

require

('html-webpack-plugin');

const htmlplugin =

newhtmlwebpackplugin()

;module.exports =},

devserver:

, entry: path.

join

(__dirname,

'./src/main.js'),

output:

, plugins:

[htmlplugin]

};

$webpack 生成對應的檔案

$npm run dev 啟動監聽

安裝識別.vue及識別css的檔案

cnpm i css-loader style-loader -

d//不安裝這個,則.vue的style無法識別

cnpm i vue-loader -

dcnpm i vue-loader-plugin -

d//vue-loader的使用都是需要伴生 vueloaderplugin的

cnpm i vue-template-compiler -

dconst vueloaderplugin =

require

('vue-loader/lib/plugin');

module.exports =,,

]},}

;

main.js

import vue from

'vue';;

newvue()

;

安裝less

cnpm i less less-loader -

dmodule.exports =,]

},};

"less"

>

@primary-color: yellow;

.box

}<

/style>

在生產環境中開啟$webpack編譯

vue環境搭建

1.安裝node.js 2.vue環境搭建要依賴node,借助於node裡的npm包管理來安裝需要的依賴等。基於node.js,利用 npm映象安裝相關依賴 輸入 npm install g cnpm registry 3.安裝全域性vue cli腳手架,用於搭建所需的模板框架 1 輸入 cnpm ...

Vue環境搭建

第一步 開啟命令列,輸入 node v檢視版本號,如果顯示版本號則安裝成功。第二步,安裝 映象。第三步 安裝vue命令列工具 vue cli 在輸入 映象後輸入 全域性安裝 vue cli 前邊安裝了cnpm。可以用cnpm安裝vue cli了 cnpm install global vue cli...

Vue 環境搭建

2.安裝vue npm install vue g 現在一般安裝node之後會自動安裝npm包管理器,g表示全域性安裝,不帶 g會在當前cmd當前所在目錄新建node modules,並將vue安裝到此資料夾下 3.安裝webpack npm install webpack g cmd命令列輸入we...