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...