手动搭建 vue 项目
搭建 vue 前首先搭建 webpack 项目
首先你应当安装一下 NPM 以及 Node.JS
安装完成后, 进行如下操作:
- // 创建项目根目录
- mkdir some_project_name
- // 切换到项目目录下
- cd some_project_name
- // 初始化该项目
- NPM init -y
- // 下载并安装 webpack 相关包
- NPM install webpack webpack-cli webpack-dev-server --save-dev
- // 手动创建相关的文件夹 --mkdir 中使用 // 或 \
- mkdir src\pages src\components src\assets\JS src\assets\CSS src\assets\imgs src\assets\fonts dist build
- // 手动创建相关文件 --touch 命令中可以使用 / .
- touch index.html src/assets/JS/main.JS build/webpack.dev.conf.JS build/webpack.base.conf.JS build/webpack.prod.conf.JS
利用 IDE 编写 index.HTML 以及 main.JS
(index.HTML)
- <!DOCTYPE HTML>
- <HTML>
- <head>
- </head>
- <body>
- </body>
- <script src="./src/js/bundle.js">
- </script>
- </HTML>
- (src/assets/JS/main.JS)
- (function(){
- const promise = new Promise((resolve,reject) =>{
- resolve('hello webpack project')
- })
- promise.then(res =>{
- console.log(res);
- })
- })();
修改 package.JSON 中 scripts 字段
- "scripts":{
- "dev":"webpack-dev-server --inline --progress --config ./build/webpack.dev.conf.js"
- }
编写./build/webpack.dev.conf.JS
- const path = require('path');
- module.exports = {
- entry: path.resolve(__dirname,'./src/assets/js/main.js'),
- output:{
- path: path.resolve(__dirname,'./dist'),
- filename: 'js/bundle.js'
- }
- }
启动项目, 并打开浏览器 localhost:8080
NPM run dev
控制台如果出现了'hello webpack project' 字样, 说明 webpack 项目已经可以使用
后续补充 热启动等优化...
来源: http://www.bubuko.com/infodetail-3119764.html