vue的环境初始化

下载nodejs

https://nodejs.org/en/download/

安装

node -v

#查看版本

 npm -v
 
环境初始化
在所在的目录下执行

$ npm init --yes

安装webpack

npm i webpack@3.12.0 -g

 

查看版本webpack -V

执行

$ webpack ./main.js ./bundle.js

 

 

使用npm执行

在main.js,修改"dev":"webpack"

{
"name": "01",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev":"webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.12.0"
}
}

新建文件

module.exports={
//entry入口
//output出口
entry:{
main:'./main.js'
},
output:{
filename:'./bundle.js'
}

}

 

执行命令

$ webpack

 

更改package.json

{
"name": "01",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack --config ./webpack.dev.config.js",
"build": "webpack --config ./webpack.prod.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.5.3",
"style-loader": "^1.2.1",
"webpack": "^3.12.0"
}
}

执行的命令

$ npm run dev

#########################

引进css的文件

$ npm install css-loader -D;npm install style-loader -D

在packgae.json中有

{
"name": "01",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev":"webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.12.0"
}
}

新建文件

module.exports={
//entry入口
//output出口
entry:{
main:'./main.js'
},
output:{
filename:'./bundle.js'
}

}

 

执行命令

$ webpack

 

更改package.json

{
"name": "01",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack --config ./webpack.dev.config.js",
"build": "webpack --config ./webpack.prod.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.5.3",
"style-loader": "^1.2.1",
"webpack": "^3.12.0"
}
}

 

posted @ 2020-04-29 13:45  guohso  阅读(231)  评论(0)    收藏  举报