[FE] 有效开展一个前端项目2 (vuejs-templates/webpack)

 
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’) 相似。
 
    根 url,如 /assets/logo.png,将不被处理。

  

  针对SEO做预渲染(http://vuejs-templates.github.io/webpack/prerender.html

 
4.vuejs、vuex、vue-router 等组件用法
 
 
 
 
 
5.安装浏览器扩展 - 调试工具 vue-devtools
 
 
 
完成上面5步,基本可以展开一个现代化前端项目了。如果想让使用和理解上更深入一些,对 webpack、vuejs 的研究也必不可少。
 
上一篇:cs api测试


下一篇:[front]有效开展一个前端项目