[FE] 有效开展一个前端项目-V2 (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.安装模板项目

 

https://github.com/vuejs-templates/webpack

http://vuejs-templates.github.io/webpack

$ vue init webpack my-project
$ cd my-project
$ npm install && npm start

 

文档摘要：

 

　　处理静态资源（http://vuejs-templates.github.io/webpack/static.html）

• 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 等组件用法

 

vuejs@doc https://cn.vuejs.org/v2/guide/

 

vuex@doc https://router.vuejs.org/zh/

 

vue-router@doc https://vuex.vuejs.org/guide

 

 

5.安装浏览器扩展 - 调试工具 vue-devtools

 

vue-devtools@doc https://github.com/vuejs/vue-devtools

 

 

完成上面5步，基本可以展开一个现代化前端项目了。如果想让使用和理解上更深入一些，对 webpack、vuejs 的研究也必不可少。

 

[FE] 有效开展一个前端项目-V1 (gulp/angular)

[FE] 有效开展一个前端项目-V3 (Vue CLI / Vue SSR )

 

Refer：Vue3的进步

Link：https://www.cnblogs.com/farwish/p/9420789.html