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

 

1.安装 nodejs、npm

$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
$ sudo apt-get install -y nodejs
$ sudo apt-get install -y npm

2.安装 webpack、vue-cli

$ npm install -g webpack && npm install -g vue-cli

3.安装模板项目  https://github.com/vuejs-templates/webpack

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

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

 

文档摘要：

　　处理静态资源

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

 

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

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

@doc  https://vuex.vuejs.org/guide

 

 

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

 

[FE] 有效开展一个前端项目1

 

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