Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Vue 淺談前端建置工具
Semelhante a Vue 淺談前端建置工具 (20)
Último
Último (20)
Vue 淺談前端建置工具
- 3. • • • webpack • vue-loader • vue-cli • vue templates (webpack) •
- 4. • HTML • CSS • Javascript • Assets(Images, Fonts) EB
- 5. • HTML - Templates • CSS - Sass, Less, PostCSS • Javascript - Compile To Javascript • • • • Lint • Debug Tools
- 7. • Bower, npm • Browserify, RequireJS • Grunt • gulp, fly • Brunch • webpack • jspm • rollup
- 13. > ls -al | grep whoami pipe
- 16. Javascript
- 19. > npm install -g browserify > browserify [src] -o > [dist]
- 20. webpack
- 21. • • • ES6 Module Loader Polypill • SystemJS Universal Dynamic Module Loader Any type of module format can be loaded and it will be detected automatically by SystemJS.
- 22. jspm?
- 25. webpack
- 26. • npm + • grunt, gulp • requires, browserify • webpack + ( ) • jspm + + + ( ) • rollup, fly,
- 27. webpack • • / (2014) • • • HRM • loaders & plugins • Code Splitting (sync, async chunk) • •
- 28. webpack • • / • • • HRM • loaders & plugins • Code Splitting (sync, async chunk) • •
- 29. webpack
- 30. ...
- 34. # npm/nvm > mkdir vuedinner && cd vuedinner > npm init -y > npm i webpack -D https://github.com/andyyou/vue-dinner-demo
- 35. > webpack <entry> <output> > webpack e1.js e2.js bundle.js > webpack andyyou=./entry.js "[name].js" >> output a andyyou.js file. // webpack.config.js module.exports = { output: { filename: "[name].bundle.js" } }
- 36. 1. index.html 2. main.js index.js 3. 4. webpack
- 38. > npm i css-loader style-loader file-loader -D !
- 39. > webpack main.js bundle.js —output-public-path=‘/dist/' --module-bind 'css=style!css' --module-bind 'png=file'
- 42. > npm i webpack-dev-server -D
- 43. • dll • css ( ) • , , , • HTML5 Cache mainfest • Offline (ServiceWorker) • HRM • s3 • plugins
- 44. ES2015 + Vue
- 45. 1. 2. webpack.config.js 3. .babelrc 4. ( Vue.js) https://github.com/babel/babel-loader
- 46. # webpack: webapck # webpack-dev-server: # webpack-merge: (webpack.config.js) # css-loader: css # style-loader: css html # file-loader: # url-loader: base64 # babel-core: ES2015 babel # babel-loader: ES2015 # babel-plugin-transform-runtime: polyfilling ( babel-runtime) # babel-preset-es2015: es2015 # babel-preset-stage-0: # babel-runtime: ES2015+ helpers, polyfilling `class MyClass {}` -> `_classCallCheck` AST # vue-loader: vue # vue-html-loader: vue template # vue-style-loader: vue # vue-hot-reload-api: Hot reload API for Vue components
- 50. • <template> • HTML • vue <template> • • <script> • javascript ES2015 Babel • vue <script> • JS CommonJS require • import ES2015 • script Vue - Vue.extend() • <style> • css • <style> • `sytle-loader` <head> <style> • webpack css
- 51. src CommonJS require • ./ • module/dist/all.css npm <template src="./template.html"></template> <style src="./style.css"></style> <script src="./script.js"></script>
- 52. vue-style!css![options]!rewriter(postcss) Source Code • autpprefixer • scoped • postcss + cssnext
- 55. vue-loader loader webpack loader jade-loader function HTML String jade jade-loader
- 56. • file-loader • url-loader base64 HTTP request url(image.png) > require(‘file!./image.png')
- 58. > npm i vue-loader vue-html-loader vue-style-loader vue-hot-reload- api@1 -D # 1. webpack.config.js # 2. main.js app.vue
- 59. > webpack-dev-server --inline --hot Hot Module Replacement / Hot Reload
- 60. webpack-dev-server • Iframe mode http://localhost:8080/webpack-dev-server/index.html • Inline mode webpack-dev-server client entry bundle
- 67. JS
- 68. +
- 70. vue-loader vue-cli > npm install -g vue-cli > vue init <template-name> <project-name> > vue init webpack v-project
- 71. webpack
- 72. webpack dev middleware plugins • webpack dev middleware • webpack hot middleware • html-webpack-plugin • html-webpack-template • extract-text-webpack-plugin
- 73. Vue - PASSER