用webpack一步步构建Vue2项目 笔记
2017-09-29 13:28
351 查看
Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:
假设已经安装好nodejs和npm。
国内用户强烈建议使用cnpm。
如果执行成功,则会生成dist目录,就是打包好的目录。
原文: https://www.tech1024.cn/original/2948.html
阅读对象
本文时候对Node.js 和相关构建有一定了解的同学假设已经安装好nodejs和npm。
国内用户强烈建议使用cnpm。
创建项目
## 如果使用cnpm,将npm替换成cnpm即可。 ## 全局安装 vue-cli npm install --global vue-cli ## 创建一个基于 webpack 模板的新项目,my-project为项目目录名称 vue init webpack my-project ## 接着会提示一些选项,根据自己的需求填写或选择y/n ## 项目名称 ? Project name (my-project) ? Project name my-project ## 项目描述 ? Project description (A Vue.js project) ? Project description A Vue.js project ## 项目作者 ? Author (techlee <xxx@xxx.com>) ? Author xxx@xxx.com ? Vue build standalone ## 是否安装vue-router路由,这里选是 ? Install vue-router? (Y/n) y ? Install vue-router? Yes ## 是否需要ESLint代码检查,这里选否 ? Use ESLint to lint your code? (Y/n) n ? Use ESLint to lint your code? No ## 是否需要unit单元测试,这里选否 ? Setup unit tests with Karma + Mocha? (Y/n) n ? Setup unit tests with Karma + Mocha? No ## 是否需要e2e,这里选否 ? Setup e2e tests with Nightwatch? (Y/n) n ? Setup e2e tests with Nightwatch? No
安装相关依赖
## 走你 ## 切换到项目目录 cd my-project ## 使用npm安装依赖 npm install ## 运行项目 npm run dev
大功告成
如果没有报错,则会自动打开 http://localhost:8080/#/ ,到这里就项目就搭建好了。项目目录
. ├── build/ # webpack config files │ └── ... ├── config/ │ ├── index.js # main project config │ └── ... ├── src/ │ ├── main.js # app entry file │ ├── App.vue # main app component │ ├── components/ # ui components │ │ └── ... │ └── assets/ # module assets (processed by webpack) │ └── ... ├── static/ # pure static assets (directly copied) ├── .babelrc # babel config ├── .postcssrc.js # postcss config ├── .eslintrc.js # eslint config ├── .editorconfig # editor config ├── index.html # index.html template └── package.json # build scripts and dependencies
生产环境部署
使用 Webpack 的 DefinePlugin 来指定生产环境,以便在压缩时可以让 UglifyJS 自动删除代码块内的警告语句。webpack --config build/webpack.dev.conf.js
如果执行成功,则会生成dist目录,就是打包好的目录。
原文: https://www.tech1024.cn/original/2948.html
相关文章推荐
- 使用vue-cil构建vue2项目,webpack打包项目
- webpack学习笔记(一)从零开始构建基础webpack项目
- vue+webpack 构建项目
- webpack从零开始构建项目之rem问题(三)
- Vue2 + webpack 项目实战(一)环境搭建
- Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面
- vue项目构建中webpack配置(一)
- Vue+webpack学习案例(一)-构建Vue项目
- webpack 1.x构建react项目简单配置
- webpack构建vue项目(配置篇)
- vue2.0新手发车(一):使用webpack构建项目
- webpack踩坑之路——构建基本的React+ES6项目
- 提高 webpack 构建 Vue 项目的速度
- 提高 webpack 构建 Vue 项目的速度
- webpack从零开始构建项目之vue模板配置(二)
- webpack+vue+vueRouter模块化构建完整项目实例超详细步骤(附截图、代码、入门篇)
- webpack踩坑之路——构建基本的React+ES6项目
- Webpack项目构建
- Vue2+VueRouter2+webpack 构建项目实战(四):接通api,渲染列表
- webpack构建vue项目(配置篇)