详解用vue-cli来搭建vue项目和webpack

2020-06-13 10:42:12易采站长站整理

vue-cli

用vue-cli来搭建vue项目

第一步:全局安装vue-cli


sudo npm install vue-cli -g

第二步:初始化一个项目


vue init webpack-simple projectName

第三步:把文件切换到初始化的项目中


cd projectName

第四步:安装依赖


npm install

当然也可以用淘宝镜像cnpm来安装,这样快很多


cnpm install

第五步:运行


npm run dev

完成一个初始化vue项目

webpack

要开始一个vue项目,

那也必须要了解webpack

webpack是一个前端资源模块化管理和打包工具

 首先你可以建立很多个js,css文件,但是利用webpack就只需要在index.html那里引用一个js文件,也就是所谓的打包文件,不需要去引用所以的js,css文件

 第一步:全局安装webpack


sudo npm install webpack -g

第二步:建立一个package.json基础配置文件


npm init

第三步:安装webpack的依赖


npm install webpack --save-dev

第四步:一个项目里面的index.html文件


<html>

<head>

<meta charset="utf-8">

</head>

<body>

<script src="bundle.js"></script>

</body>

</html>

第五步:把需要的js,css文件单独写出来


//module.js

module.exports = 'It works from module.js.'

//entry.js

document.write('It works.')

document.write(required('./module.js'))

写完需要的js文件

第六步:打包entry.js文件到bundle.js文件中


webpack entry.js bundle.js

第七步:假设还有css文件


//style.css

body{

background:red

}

现在有了css文件也想要把css文件打包进去

第八步:把css文件也打包进去

修改entry.js文件


require("!style-loader!css-loader!./style.css") // 载入 style.css

document.write('It works.')

document.write(require('./module.js'))

第九步:需要用到loader,自然要安装


npm install css-loader style-loader

第十步:还需要再重新打包编译