[FE] 有效开展一个前端项目-V2 (vuejs-templates/webpack)
2023-09-14 09:02:29 时间
1.安装 nodejs、npm
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - $ sudo apt-get install -y nodejs # 10版本的node已包含有npm,所以不需要另外执行 apt-get install -y npm
( 以上是通过 package manager 方式安装的,详细查看官网 https://nodejs.org/en/download/ )
( https://github.com/nodesource/distributions/blob/master/README.md )
注:如果是在其他 docker 镜像中集成 node 环境,Dockerfile 局部参照如下,
USER root
RUN apt-get update && apt-get install -y gnupg
RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -
RUN apt-get update && apt-get install -y nodejs
相关项目:phvia/dkc
2.安装 webpack、vue-cli
$ npm install -g webpack && npm install -g vue-cli
注意:新版本 vue cli 3 使用 npm install -g @vue/cli,不建议使用 vue-cli 了
3.安装模板项目
$ vue init webpack my-project $ cd my-project $ npm install && npm start
文档摘要:
- src/assets/ 与 static/ 的区别
由 webpack 处理的静态资源放在 src/ ,在其它源文件旁边。实际上也不需要都放在 src/assets 中,可以放在每个组件的目录中。
- 资源解析规则
相对路径 url,如 ./assets/logo.png,将被自动替换为基于 webpack 输出路径配置的 url。
没有前缀的 url,如 assets/logo.png,会和相对路径url一样对待。
~ 前缀的 url,被视为一个模块的请求,与 require('some-module/image.png’) 相似。
4.vuejs、vuex、vue-router 等组件用法
vuejs@doc https://cn.vuejs.org/v2/guide/
vuex@doc https://router.vuejs.org/zh/
vue-router@doc https://vuex.vuejs.org/guide
完成上面5步,基本可以展开一个现代化前端项目了。如果想让使用和理解上更深入一些,对 webpack、vuejs 的研究也必不可少。
Refer:Vue3的进步
相关文章
- Webpack 打包 commonjs 和 esmodule 模块的产物对比
- webpack配置完全指南
- webpack搭建基础vue项目
- webpack 默认配置和基础配置
- webpack配置优化,让你的构建速度飞起_2023-02-28
- Webpack高级配置实战
- Webpack最佳实践指南
- 从0到1 Webpack搭建Vue3开发、生产环境
- webpack通关秘籍(一)-从1kb不到的项目开始
- Webpack中的文件监听与热更新
- 总结几个 webpack 打包优化的方法,前端项目必备
- webpack原理(2):ES6 module在Webpack中如何Tree-shaking构建
- webpack原理(3):Tapable源码分析及钩子函数作用分析
- wxapp-boilerplate:使用 webpack, babel, scss 开发的微信小程序项目脚手架